Question

我有一个由WordPress预渲染的HTML页面和三个React组件：<App />，<Component />和<AnotherComponent />。

HTML页面中有两个ID div容器（div id="component"和div id="anotherComponent"），它们是分开的，我想要渲染React组件。他们也分享一些州。我想使用<App />编写所有逻辑和事件处理，然后将状态（this.props.counter）传递给每个组件。

我想对每个组件使用ReactDOM.render(<Component />, document.getElementById('component'));并使用<App />来控制逻辑但是如何将状态传递给每个组件，以及render()在{ {1}}。

最好的方法是什么？

Answer 1

ReactDOM.render就像React应用程序的主要方法。所有与反应相关的概念（如组件，状态和上下文）都从此处开始。您可以使用相同的容器DOM节点或不同的容器DOM节点在同一页面上多次调用ReactDOM.render。如果容器相同，则会对其执行更新，并且仅在必要时改变DOM以反映最新的React元素。但是如果容器节点不同，它将创建两个不同的React根，并且它们完全相互独立。这两个React根之间没有共享状态或上下文，这就像在同一页面上运行两个不同的React应用程序一样。

此外，在将带有ReactDOM.render的根元素渲染到容器节点之后，所有其他后代元素将由React在其中呈现，并且我们没有任何控制来更改它们被渲染的位置（这将在未来）。

因此，在您的情况下，如果要在不同的容器节点中呈现这两个组件，您将无法拥有保持共享状态或事件处理的App组件。但是，您可以通过道具创建两个不同的React根并在它们之间共享对象和方法。

const data = {/*...*/}

ReactDOM.render(<Component data={data} />,
  document.getElementById('component'));

ReactDOM.render(<AnotherComponent data={data} />,
  document.getElementById('anotherComponent'));

但是，如果您想在某些时候更改这些道具，则必须手动重新渲染根组件。例如，如果你有一个counter变量，每秒更新一次，你必须用每个新值重新渲染你的根。

let couter = 0

setInterval(function(){
  counter++

  ReactDOM.render(<Component data={data} />,
    document.getElementById('component'));

  ReactDOM.render(<AnotherComponent data={data} />,
    document.getElementById('anotherComponent'));

}, 1000)

另一个不错的选择是使用类似Redux的状态管理库。您可以拥有一个store并在两个根之间共享它。如果你需要在两个根之间共享一个非常复杂的状态，我强烈推荐这种方法。

const store = createStore(/* ... */)

// ...

ReactDOM.render(
    <Provider store={store}>
        <Component />
    </Provider>,
    document.getElementById('component')
);

ReactDOM.render(
    <Provider store={store}>
        <AnotherComponent />
    </Provider>,
    document.getElementById('anotherComponent')
);

当您使用Redux时，您会将Component和AnotherComponent与store更高级别的组件连接到store。在幕后，当您使用组件的connect方法更改状态时，ReactDOM.render组件将subscribe更改并重新呈现组件。因此，只要您通过将操作分派给商店来更改状态，就不必手动调用81283 \t 0101011010.....0110方法。

在共享状态时呈现不同容器中的组件

1 个答案: