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

Question

我在我的 HTML 文件中定义了我的 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>

我怎样才能做到这一点？

Answer 1

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

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

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