在 wordpress 页面上渲染一个反应组件答案

【问题标题】：Render a react component on a wordpress page在 wordpress 页面上渲染一个反应组件
【发布时间】：2018-09-26 19:59:16
【问题描述】：

我们目前使用 Wordpress 构建了我们的网站，并且我在 React 中构建了一个组件，我们希望有条件地在页面上呈现。

我已构建组件并与 Webpack 捆绑用于生产，但不知道如何将其添加到我们的网站并在页面上呈现组件

编辑我还需要有条件地渲染组件（表单提交、按钮点击等）

有没有人成功做到这一点？

【问题讨论】：

标签： wordpress reactjs webpack

【解决方案1】：

既然您已经构建并捆绑了您的组件，您只需要做三件事：

将捆绑的 JavaScript（Webpack 输出）作为脚本标记添加到您希望组件位于的任何页面中（最好在 <body> 的底部）。
示例：<script src="wp-content/react/bundle.js"></script>
将 React 将绑定到的根元素添加到同一页面。
示例：<div id="react-root"></div>
在您的组件文件中，将组件渲染到根元素。
示例：ReactDOM.render(<Component />, document.getElementById('react-root'));

要根据组件文件外部发生的事情动态显示和隐藏 React 组件，您需要创建一种将外部（DOM）连接到内部（React）的方法。最简单的方法是使用附加到 window 的全局变量。

在您的 React 组件中，添加定义全局变量的 componentWillMount 方法：

componentWillMount() {
    window.showComponent = (option) => {
        // "option" should be true or false
        this.setState({ display: option });
    }
}

根据上面传递给setState 的值，您需要将display 属性添加到组件的状态：

constructor(props) {
    super(props);
    this.state = {
        display: false
    };
}

现在根据render()方法中this.state.display的值使组件显示或隐藏：

render() {
  if (this.state.display) {
    return (
      ...
    )
  } else {
    return null;
  }
}

剩下要做的就是在处理表单的代码中使用showComponent(true) 或showComponent(false)。

【讨论】：

这很棒，我设法将它呈现在我的网页上！我现在唯一的问题是我只想有条件地渲染它。例如，当用户提交表单时，它会创建 id="react-root" 的 div。但是，当脚本运行但不存在具有该 id 的元素时出现错误
无法动态添加/删除 React 根元素，因为应用会在页面加载时绑定到它。为此，您需要采取一些额外的步骤。我会将其编辑到我的答案中。
好的，我让它工作了。我所做的是实际在非反应页面上动态创建根元素，然后将脚本添加到页面中

【解决方案2】：

在您的 React 项目中，将文件添加到全局范围（窗口），如下所示：

window.myReactComponents = {
  myFirstComponent: () => <MyFirstComponent/>
}

捆绑后，请在非反应页面上引用 bundlejs 文件。

在全局范围内的非反应页面中，引用 ReactDOM.render 以及它应该用来渲染的根元素，如下所示：

window.useComponent = {
  renderMyFirstComponent : ReactDOM.render(
    window.myReactComponents.myFirstComponent(),
    document.getElementById('myReactElement')
  )
};

就是这样！

Live example

ReactDOM.render Documentation

【讨论】：

嘿，谢谢，这确实有效，但是对于较大的捆绑组件，其他答案会更好一些。不过感谢答案！