Question

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

我已经将Webpack构建并捆绑了组件用于生产，但是无法弄清楚如何将其添加到我们的网站并在页面上呈现该组件

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

有人成功做到了吗？

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

现在基于this.state.display方法内render()的值来显示或隐藏组件：

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

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

Answer 2

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

var jsdom = require('jsdom').JSDOM;
jsdom.fromFile('table.html').then(function (dom) {
  var tableRows = dom.window.document.querySelectorAll("table tr");
  var array = [];
  for (var i=1; i<tableRows.length; i++) {
    var name = tableRows[i].querySelector('td:nth-child(2)').textContent;
    var country = tableRows[i].querySelector('td:nth-child(4)').textContent;
    var pop = tableRows[i].querySelector('td:nth-child(5)').textContent;
    var url = tableRows[i].querySelector('td:nth-child(2) a').href;
    array.push({
      'name': name,
      'country': country,
      'population': pop,
      'url': url
    });
  }
  var jsonString = JSON.stringify(array)
  console.log(jsonString);
});

一旦捆绑了，请在您的非反应页面上引用bundlejs文件。

在全局作用域的非反应页面中，引用带有它应用于渲染的根元素的ReactDOM.render：

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

就是这样！

Live example

ReactDOM.render Documentation

在wordpress页面上渲染一个react组件

2 个答案: