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

您可以componentDidMount拥有对DOM的完全访问权限。您可以使用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.findDOMNode(it)来获取实际的DOM元素。

Answer 2

使用this.refs为"deprecated"，请尝试以下方式：

render() {
 return <div ref={(DOMNodeRef) => {
                 this.componentRef=DOMNodeRef;
                }}>
      ...
      </div>;
 }

然后this.componentRef可以访问componentDidMount()，因此您可以附加外部DOM元素：

componentDidMount(){
  this.componentRef.appendChild(externalDOMelement);
}

注意：

请记住，this.componentRef会随着时间的推移而变化（渲染（）），因此您必须在将其传递给的任何地方进行更新。

在使用之前检查已定义的参考：if(this.componentRef){// ... your code}

功能组件＆＃39; refs处理differently。

来源：

React Doc

Answer 3

React为我们提供了dangerouslySetInnerHTML的功能。它为我们提供了添加HTML元素的支持。例如

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

您还可以使用react-16中引入的门户，通过使用以下代码将React组件附加到树中的任何位置。

ReactDOM.createPortal(child, container)

按照以下链接Portals进行参考

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

3 个答案:

注意：

来源：