如何将外部 DOM 附加到 React 组件？

Question

我有一个页面，其中包含在服务器中呈现的表单，它处理验证以及选择的正确值。

我想隐藏该表单的 DOM，并将其附加到 React 组件中，以便我可以在 React-router 中使用它。

const NewItem = React.createClass({  
  render() {                          
    return (                          
      <div>                           
        <h1>New item</h1>
        {/* I WANT THE FORM FROM THE PAGE HERE*/}
      </div>                          
    )                                 
  }                                   
})                                    

最好的方法是什么？

Answer 1

您拥有对 DOM 的完全访问权限componentDidMount。您可以使用 refs 来访问您想要的特定 DOM 元素。

var NewItem = React.createClass({
    componentDidMount: function () {
        this.refs.formTarget.appendChild(myFormDomElement);
    },

    render: function () {
        return React.DOM.div(null,
            React.DOM.h1(null, "New item"),
            React.DOM.div({ref: "formTarget"}));
    }
});

请注意，在 0.14 中，ref 是原始 DOM 元素。在此之前，ref 是一个 React 组件，您必须调用React.findDOMNode(it)才能获取实际的 DOM 元素。