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

Question

我在HTML文件中定义了reactjs组件，如下所示：

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

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

WORKSHISTORY.js文件：

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

WORKSHISTORY.html文件：

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

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

Answer 1

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

如果是这种情况，只需在渲染标记之前包含<script>-标记，src-属性设置为文件路径，如我的示例所示：

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