单独渲染每个React.js子组件

Question

我使用React.js渲染出大部分HTML，并且此工作正常。然而，在使用cms框架的部分，这期望每个组件都在cms创建的一些自动生成的html内，而我无法在反应代码中生成这些html。下面的实施例：

发生反应生成的代码

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

CMS

<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中，我可以通过Ids来创建它们。是否有可能以某种方式访问​​这些子组件中的每一个，并将它们分别渲染到相应的自动生成的div中？我试过看顶级组件上的React.createElement创建的对象，但我无法弄清楚如何识别子组件/访问那里的属性。

Answer 1

你可以看看ReactDOM.render（）。这允许你在你喜欢的任何容器中分别注入你的组件。 这取决于您使用的是哪个React版本。我相信这是14岁以上。本页解释顶级API https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html