Multiple instances of the same reaction component

Question

I want to add a reaction component, a comment function, to a non-reactive site.

The site has a news page with endless scrolling. Under each news, I want to include a responsive comment component. I plan to model it after the FB tutorial: http://facebook.imtqy.com/react/docs/tutorial.html

My question is: how do I dynamically mount each React component into a DOM history element? Basically, I want to have many instances of the same comment comment component, but each instance is tied to a unique story (div).

I think I need to display the server side response component where I can dynamically set the React.renderComponent . Any pointers / examples appreciated.

Answer 1

When the message is added, you need your data and the target domain node (we will call these variables data and el )

 React.render(<MyComponent data={data} />, el); 

Or without JSX

 React.render(React.createElement(MyComponent, {data: data}), el); 

Clear:

 React.unmountComponentAtNode(el); 

For server side rendering, you can:

 React.renderToString(React.createElement(MyComponent, {data: data})) 

and as long as the result ends with el on the client, you can set it using React.render, as described above.