如何使用一个.js文件中定义ReactJS组件

-1

我在HTML文件中像下面的定义我reactjs组件的HTML文件：如何使用一个.js文件中定义ReactJS组件

<script type="text/babel"> 
var WorkHistory = React.createClass({ 
...... 
}); 
        ReactDOM.render(
         <WorkHistory 
         />, 
         document.getElementById('work_history') 
        ); 
</script>

现在，我可以很容易地在我的HTML页面中使用此。但是，我需要写这样整个全部代码：

WORKHISTORY.js文件：

var WorkHistory = React.createClass({ 
    ...... 
    });

WORKHISTORY.html文件：

<script type="text/babel"> 
         ReactDOM.render(
          <WorkHistory 
          />, 
          document.getElementById('work_history') 
         ); 
</script>

我怎样才能做到这一点??

来源

2016-07-27 Abhay

如果我正确理解您的问题，您希望将组件编写在单独的.js文件中，并且能够在<script> -tag中使用ReactDOM.render？

如果是这样的情况下，简单地包括<script>标签都有效与src -attribute设置为您的文件的路径之前渲染标签，按我的例子：

<script src="./path/to/workhistory.js"></script> 
<script type="text/babel"> 
    ReactDOM.render(
    <WorkHistory />, 
    document.getElementById('work_history') 
); 
</script>

来源

2016-07-27 14:19:25 ahstro

在这种情况下，我得到错误： 'ReferenceError：WorkHistory未定义' – Abhay

噢，我现在看到你正在使用Babel来传译你的代码。 Babel会转换你的代码，并在其前面加上''strict strict''，它封装了这个文件的范围，阻止你的其他'script'标签访问它的变量。如果你只是测试东西，你可以在分配和访问你的变量时使用全局范围 - “窗口” - 但更好的解决方案是使用[构建系统]（https：// babeljs）。 io/docs/setup /）而不是Babel。 – ahstro

如何使用一个.js文件中定义ReactJS组件

回答

相关问题