Question

尝试使用单独的文件创建组件类

的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="../../assets/libs/react-0.13.3/build/react.js"></script>
    <script src="../../assets/libs/babel.min.js"></script>
  </head>
  <body>
    <section class="reactive"></section>
    <script type="text/babel" src="../../components/AppBar/NavBar.js"></script>
    <script type="text/babel">
      var
        reactiveNode = document.querySelector('.reactive');
      React.render( <NavBar value='hello world'/>, reactiveNode );
    </script>
  </body>
</html>

Navbar.js

var NavBar = React.createClass({
  render: function ()
  {
    return ( <h1>{this.props.value}</h1> );
  }
});

跑完后，我有了日志：

XHR完成加载：GET   ＆＃34; http://localhost:3000/app/components/AppBar/NavBar.js＆＃34;

未捕获的ReferenceError：未定义NavBar

仅在index.html文件

中创建类时才有效

Answer 1

问题在于变量的范围。

使用

解决

window.NavBar = React.createClass({
   // ...
});

Answer 2

如果您使用的是OOP react，应该是这样

protobuf::libprotobuf-lite

ReactJs + Babel - 使用单独的文件定义组件

2 个答案: