React.js：绑定到现有元素答案

【问题标题】：React.js: Bind to Existing ElementsReact.js：绑定到现有元素
【发布时间】：2014-02-06 21:30:54
【问题描述】：

在 Backbone.js 中，您可以使用 el 属性或调用 view.setElement() 来指定视图的元素。

是否有将 React.js 组件连接到现有 DOM 元素的等效方法？

【问题讨论】：

也许这会有所帮助...stackoverflow.com/questions/27160763/…

【解决方案1】：

我对 Backbone 并不太熟悉，但是要将 React 组件挂接到 DOM 中，您可以使用 renderComponent 函数。第一个 arg 是组件，第二个是 DOM 元素：

React.renderComponent(<SampleComponent />, document.getElementById('app'));

根据 cmets 中给出的上下文更新：

React 通过替换元素的内容而不是元素本身来连接元素。您可以在该元素上多次调用renderComponent()，它每次都会运行相同的差异算法。如果您想传入不同的道具、在服务器上预渲染或完全渲染不同的组件，这将非常方便。每次更新实际 DOM 时都会使用相同的过程，就像在组件本身中使用 setState() 一样。

【讨论】：

这不是将 SampleComponent 作为#app 的子组件吗？我认为 OP 希望用组件替换现有元素。
@EdwardMSmith 啊，我不熟悉 Backbone 的行为。我会更新我的答案。
谢谢 - 是的，澄清一下，我指的是在服务器端加载的元素，例如需要知道其默认排序顺序是升序还是降序的选择菜单选项。因此，当页面加载时，该元素已经存在，我需要使用 Backbone/React 将其他行为/数据绑定到它，而无需使用客户端模板或 React 组件从头开始呈现它。如果它更有帮助，我可以扩展我的问题。
@cantera React 控制渲染（为了有效区分其虚拟 DOM，它需要这样做），所以无论如何我们都需要重新渲染它。除非您使用renderComponentToString() 在服务器上进行预渲染，否则它将运行差异并且不会更改任何内容。您是否有 jsfiddle 或其他范围更大的示例？我很乐意提供帮助。
在React version 0.12 React.renderComponent 已更改为React.render