分別渲染每個React.js子組件

Question

我正在使用React.js來渲染我的大部分HTML，這很好用。 但是在使用cms框架的部分，這要求每個組件都在cms創建的一些自動生成的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，我可以通過ID解決。 是否有可能以某種方式訪問​​這些子組件中的每一個並在相應的自動生成的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