如何在 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 并能够在您使用 ReactDOM.render 的 <script>-tag 中访问它们吗？

如果是这种情况，只需将<script>-tags 与src-attribute 设置为您的文件路径在呈现标签之前，按照我的示例：

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