React组件能否操作现有的DOM节点？

Question

我希望为一些现有的服务器端渲染的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组件来添加/删除hide类到.details div？

我不希望React重新渲染表单，因为页面的其余部分已由服务器处理。

- Sam Selikoff

Answer 1

这里有一个解决方案，但我不确定它是否有效：您可以使用 dangerouslySetInnerHTML 在已有的DOM元素上创建一个包装器。

例如，假设您想在两个已存在的 div 元素上添加一个交换器（请参见：https://jsfiddle.net/gdoumenc/a86g58qz/）：

// 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>;
    }
});

`

- gdoumenc

Answer 2

请查看服务器端渲染React示例，您可以在那里看到PHP脚本从node.js获取React渲染结果返回给客户端，然后将相同的React组件附加到DOM以进行进一步修改。

如果您想在服务器端呈现HTML，然后由React处理，这是最佳方法。否则，您需要在React和服务器端模板引擎中编写两次模板。

- daniula

---

这样的链接应该指向特定的哈希/标签，因为该链接已失效。在 https://github.com/facebook/react/tree/0.12-stable/examples/server-rendering 找到它。 - Hamish

谢谢您的注意。我已经更新了我的答案，并提供了正确的链接。 - daniula