如何在没有节点的情况下使用捆绑的反应组件？

Question

我正在构建一个反应项目以部署在apache服务器上（后端没有节点），可以说我的组件名称是 FooComponent ，我已经使用webpack捆绑了它（我在预设中使用babel来解析jsx并将其转换为有效的js代码），我面临的问题是如何使用此组件，在index.php中，我有这样的代码

--existing

但是此代码将失败，因为它是jsx标记，并且我们将在控制台中获得意外的令牌<div id="container"> </div> <!-- bundle contains my foo component --> <script src="dist/bundle.js"></script> <script> ReactDOM.render( <FooComponent /> ,document.getElementById("container")); </script> ，我如何正确呈现此FooComponent？我不想在我的bundle.js文件中使用ReactDOM.render，我想将一些数据传递给该组件（如果我将其分配给index.php中的js变量并在此处引用该变量，则该数据将从php到达我认为这可能会影响代码的可读性

Answer 1

普通javascript中的ReactDOM.render( <FooComponent /> ,document.getElementById("container"));等同于：

ReactDOM.render(React.createElement(FooComponent, null), document.getElementById("container"));

您可以使用babel's online tool here:

自己制作