在wordpress页面上呈现react组件

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

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

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

---

有人成功地做到了这一点吗

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

将捆绑的JavaScript（Webpack输出）作为脚本标记添加到您希望组件位于的任何页面中（最好位于

的底部）。
示例：

添加将绑定到同一页面的根元素。
示例：

在组件文件中，将组件呈现给根元素。
示例：

ReactDOM.render（，document.getElementById（'react-root'）

---

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

窗口

在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
    };
}

现在，要根据

this.state.display的值在
render（）方法中显示或隐藏组件，请执行以下操作：

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

只需在处理表单的代码中使用
showComponent（true）
或
showComponent（false）
。
既然您已经构建并绑定了组件，您只需要做三件事：

将捆绑的JavaScript（Webpack输出）作为脚本标记添加到您希望组件位于的任何页面中（最好位于
的底部）。

示例：

添加将绑定到同一页面的根元素。

示例：

在组件文件中，将组件呈现给根元素。

示例：
ReactDOM.render（，document.getElementById（'react-root'）


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

在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
    };
}

现在，要根据
this.state.display的值在
render（）方法中显示或隐藏组件，请执行以下操作：

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

只需在处理表单的代码中使用
showComponent（true）
或
showComponent（false）
。
在React项目中，将文件添加到全局范围（窗口），如下所示：

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

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

就这样


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

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

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

就这样


这太棒了，我设法在我的网页上呈现了它！我现在唯一的问题是，我只想有条件地呈现它。例如，当用户提交表单时，它将使用id=“react root”创建div。但是，当脚本运行但不存在具有该id的元素时，我会出现错误。由于应用程序在页面加载时绑定到React根元素，因此无法动态添加/删除React根元素。要做到这一点，您需要采取一些额外的步骤。我会把它编辑成我的答案。好的，我开始工作了。我所做的是在非反应页面上动态创建根元素，然后将脚本添加到页面。这太棒了，我成功地在我的网页上呈现了它！我现在唯一的问题是，我只想有条件地呈现它。例如，当用户提交表单时，它将使用id=“react root”创建div。但是，当脚本运行但不存在具有该id的元素时，我会出现错误。由于应用程序在页面加载时绑定到React根元素，因此无法动态添加/删除React根元素。要做到这一点，您需要采取一些额外的步骤。我会把它编辑成我的答案。好的，我开始工作了。我所做的是在非反应页面上动态创建根元素，然后将脚本添加到页面中。谢谢，这确实有效，但是对于更大的捆绑组件，另一个答案的效果更好。尽管如此，还是要感谢你的回答！嘿，谢谢，这确实有效，但是对于更大的捆绑组件，另一个答案会更好一些。尽管如此，还是要感谢你的回答！