reactjs – 使用Babel Standalone进行单个React组件渲染,仅使用i

发布时间：2020-12-15 20:12:20 所属栏目：百科来源：网络整理

导读：Noob与React在这里.我正在玩React.我有一个简单的组件在我的component.js中呈现.它包含在我的index.html文件中.我在头部包含了React,ReactDOM和babel的脚本.我只想看到一个div正确渲染.我还没有使用Node,只是使用React和Babel(使用 babel-standalone).我正在

Noob与React在这里.我正在玩React.我有一个简单的组件在我的component.js中呈现.它包含在我的index.html文件中.我在头部包含了React,ReactDOM和babel的脚本.我只想看到一个div正确渲染.我还没有使用Node,只是使用React和Babel(使用 babel-standalone).我正在使用一个简单的http服务器运行该文件.我在使用React Chrome扩展程序时遇到错误：等待root加载…重新加载检查器点击此处.

的index.html

<!DOCTYPE html>
<html>
  <head>
    <!-- React -->
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <!-- React DOM -->
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <!-- babel core-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
  </head>
  <body>
    <div id="machine-box"></div>
    <script type="text/babel" src="components.js"></script>
  </body>
</html>`

components.js

class MachineBox extends React.Component {
 render(){
   return ( <div>Hello From React </div> );
 }
}

let target =  document.getElementById('machine-box');

ReactDOM.render(
 <MachineBox />,target
)

解决方法

你的代码很好,你使用的是一个非常老版本的babel-standalone.

// this
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>

// should be this
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>

和

<script type="text/babel" src="components.js"></script>

// should be
<script type="text/babel" src="components.js" data-presets="es2015,react"></script>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!