Reactjs React组件可以操作现有的DOM节点吗？

我想给一些现有的服务器呈现的HTML添加一些功能。假设我有一张表格：

<form>
  <input type="checkbox" /> Show details

  <div class='details'>
    <input type="text" name="first_name" />
    <input type="text" name="last_name" />
  </div>
</form>

显示细节

该HTML已在服务器上生成。我想知道，每当选中和取消选中复选框时，我是否可以使用React组件，例如，向

.details

div添加/删除

隐藏

类

我不想重新呈现表单，因为页面的其余部分已经由服务器处理。

检查。您可以看到，PHP脚本正在从node.js获取React渲染结果，并将其返回给客户端，然后将相同的React组件附加到DOM以进行进一步修改

---

如果您希望在服务器端呈现HTML，然后由React处理，那么这是最好的方法。否则，您将需要编写两次模板：在React和您的服务器端模板引擎中。

有一个解决方案，但我不知道它是否有效： 您可以使用

DangerlySetinerHTML

在现有DOM元素上创建包装器

例如，考虑在两个已经存在的

div

元素（）上添加一个交换程序：

//一个包装器只呈现前面的DOM子对象
var Wrapper=React.createClass({
render:function（）{
返回；
}
});
//一个简单的交换程序
var Swapper=React.createClass({
getInitialState:函数（）{
返回{swap:false}；
},
onClick:function（）{
this.setState（{swap:！this.state.swap}）；
},
替换：功能（id）{
如果（！（此中的id））{
var节点=document.getElementById（id）；
var elt=document.createElement（node.tagName）；
elt.appendChild（node.childNodes[0]）；
此[id]=elt.innerHTML；
}
返回此[id]；
},
render:function（）{
在此替换元素
框1=；
框2=；
if（this.state.swap）{
content=[box1，box2]；
}否则{
content=[box2，box1]；
};
返回
{content}交换
;
}
});

---

`

这样的链接应该指向特定的哈希/标记，因为该链接已经消失。找到了，谢谢你的通知。我已经用正确的链接更新了我的答案。

// a wrapper just rendering the previous DOM children
var Wrapper = React.createClass({
    render: function() {
        return <div dangerouslySetInnerHTML={{__html: this.props.html}}/>;
    }
});

// a simple swapper
var Swapper = React.createClass({
    getInitialState: function() {
        return {swap: false};
    },
    onClick: function() {
        this.setState({swap: !this.state.swap});
    },
    replace: function(id) {
        if (!(id in this)) {
            var node = document.getElementById(id);
            var elt = document.createElement(node.tagName);
            elt.appendChild(node.childNodes[0]);
            this[id] = elt.innerHTML;
        }
        return this[id];
    },
    render: function() {

        // replace here the elements par wrapped ones
        box1 = <Wrapper html={this.replace('box1')}/>;
        box2 = <Wrapper html={this.replace('box2')}/>;

        if (this.state.swap) {
            content = [box1, box2];
        } else {
            content = [box2, box1];
        };
        return <div>
            {content}<button onClick={this.onClick}>Swap</button>
        </div>;
    }
});