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

Question

I am using React.js to render out most of my HTML, and this works fine. However on the part that uses a cms framework this expects each component to be inside some auto generated html that the cms creates which i am unable to generate in the react code. Example below:

React generated code

<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>

My React.js code has essentially a single component/container for the entire page that then has many child components. What I would like to do is to create the React.js component as normal but then somehow insert each child into its relevant div which i can work out via Ids. Is it possible to somehow access each of these child components and render them separately in there respective auto generated divs? I've tried looking at the object created by React.createElement on the top level component but I can't work out how to identify the child components/access there properties.

Answer 1

You can have a look at ReactDOM.render(). This allows you to inject your component separately in any container you like. This depends on which React version you are using though. This is 14+ I believe. This page explains the top level API https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html