javascript - 分别渲染每个 React.js 子组件

Question

我正在使用 React.js 来呈现我的大部分 HTML，这工作正常。然而，在使用 cms 框架的部分，这期望每个组件都在 cms 创建的一些自动生成的 html 中，我无法在 react 代码中生成。示例如下:

React 生成的代码

<div class=“react-component-1”>
    <img src=“foo.png”/>
</div>
<div class=“react-component-2”>
    <p>Some text</p>
</div>

内容管理系统

<div class=“some-generated-value”>
    <div class=“react-component-1”>
        <img src=“foo.png”/>
    </div>
</div>

<div class=“some-generated-value”>
    <div class=“react-component-2”>
        <p>Some text</p>
    </div>
</div>

我的 React.js 代码基本上有一个组件/容器用于整个页面，然后有许多子组件。我想做的是像往常一样创建 React.js 组件，然后以某种方式将每个子组件插入到其相关的 div 中，我可以通过 ID 计算出来。是否有可能以某种方式访问​​这些子组件中的每一个并在相应的自动生成的 div 中分别呈现它们？我试过在顶级组件上查看由 React.createElement 创建的对象，但我不知道如何识别子组件/访问那里的属性。

Answer 1

你可以看看 ReactDOM.render()。这允许您将组件单独注入(inject)到您喜欢的任何容器中。不过，这取决于您使用的 React 版本。我相信这是14+。此页面解释了顶级 API https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html