我如何添加外部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

您可以完全访问componentDidMount中的DOM。你可以使用ref来访问你想要的特定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元素。

Answer 2

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>

反应& lt;16.3

使用this.refs是"deprecated"，试试这个:

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

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

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

指出:

请记住，this.componentRef会随着时间的推移而变化(render_())，所以无论你把它传递到哪里，你都必须更新它。

使用引用前检查是否有定义引用:if(this.componentRef){// ... your code}

功能组件引用的处理方式不同。

来源:

反应医生

Answer 3

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

function createMarkup() {
  return {__html: 'First · Second'};
}
function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

您还可以使用React -16中引入的门户，通过使用以下代码在树的任何地方附加React组件。

ReactDOM.createPortal(child, container)

遵循以下链接参考门户