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

我有一个在服务器中呈现表单的页面，它处理验证，并选择正确的值

我想隐藏该表单的DOM，并将其附加到react组件中，以便在react路由器中使用它

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

const NewItem=React.createClass（{
render（）{
报税表（
新项目
{/*我想要这里页面上的表单*/}
)                                 
}                                   
})                                    

---

最好的方法是什么？

您可以在

componentDidMount

中完全访问DOM。可以使用引用访问所需的特定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元素。

react>16.3 尝试使用此组件中的门户：

import {Component} from 'react';
import {createPortal} from 'react-dom';
import PropTypes from 'prop-types';

class DOMPortal extends Component {
    constructor(props) {
        super(props);
        this.el = document.createElement(props.component);
    }

    componentDidMount() {
        this.props.parentEl.appendChild(this.el);
    }

    componentWillUnmount() {
        this.props.parentEl.removeChild(this.el);
    }

    render() {
        return createPortal(
            this.props.children,
            this.el,
        );
    }
}

DOMPortal.propTypes = {
    parentEl: PropTypes.object.isRequired,
    component: PropTypes.string,
};

DOMPortal.defaultProps = {
    component: 'div',
};

现在，您可以将外部DOM引用作为parentEl道具传递给它：

<DOMPortal parentEl={decorator.contentWidget.domNode}>...children</DOMPortal>

然后，

this.componentRef

将可在

componentDidMount（）

中访问，因此您可以附加外部DOM元素：

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

笔记： 请记住，

this.componentRef

会随着时间的推移而变化（renders（）），因此无论将其传递到何处，都必须对其进行更新

使用前检查定义的引用：

if（this.componentRef）{/…您的代码}

处理功能组件的引用

资料来源：

---

React为我们提供了危险的HTML功能。它为我们提供了添加HTML元素的支持。比如说

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

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

请按照以下链接进行参考

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

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

ReactDOM.createPortal(child, container)