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

ReactJs + Babel - Defining components using separate files

本文关键字：单独 文件定义 组件 Babel ReactJs      更新时间：2023-09-26

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

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"http://localhost: 3000/app/组件/AppBar/NavBar.js"

Uncaught ReferenceError: NavBar is not defined

仅适用于在index.html文件中创建类

问题出在变量的作用域上。

使用

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

如果你正在使用OOP react，它应该是这样的

    class NavBar extends React.Component{
       // ...
    });
    window.NavBar = NavBar;
相关文章：