單獨渲染每個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