如何将外部DOM附加到React组件？ [英] How can I append external DOM to React component?

问题描述

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

I have a page with a form rendered in the server, it handles validation, and the correct value for the selects.

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

I want to hide the DOM of that form, and append it into a react component so I can use it in react-router.

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

最好的方法是什么？

推荐答案

您可以完全访问DOM在 componentDidMount 中。您可以使用refs访问所需的特定DOM元素。

You have full access to the DOM in componentDidMount. You can use refs to access the specific DOM element you want.

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元素。

Note that in 0.14, a ref is a raw DOM element. Prior to that a ref was a react component and you had to call React.findDOMNode(it) to get the actual DOM element.

这篇关于如何将外部DOM附加到React组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！