我有一个页面，在服务器中呈现了一个表单，它处理验证和选择的正确值。
我想隐藏该表单的 DOM，并将其附加到 react 组件中，以便我可以在 react-router 中使用它。
const NewItem = React.createClass({
render() {
return (
<div>
<h1>New item</h1>
{/* I WANT THE FORM FROM THE PAGE HERE*/}
</div>
)
}
})
最好的方法是什么？
您可以完全访问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 元素。
尝试在此组件中使用门户：
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 props传递给它：
<DOMPortal parentEl={decorator.contentWidget.domNode}>...children</DOMPortal>
使用this.refs是“弃用”，试试这个：
render() {
return <div ref={(DOMNodeRef) => {
this.componentRef=DOMNodeRef;
}}>
...
</div>;
}
然后this.componentRef将可以访问，componentDidMount()以便您可以附加外部 DOM 元素：
componentDidMount(){
this.componentRef.appendChild(externalDOMelement);
}
请记住，它this.componentRef会随着时间而变化（renders()），因此您必须在将它传递到的任何地方更新它。
在使用之前检查定义的引用： if(this.componentRef){// ... your code}
功能组件的引用以不同方式处理。
React 为我们提供了危险的 SetInnerHTML 功能。它为我们提供了添加 HTML 元素的支持。例如
function createMarkup() {
return {__html: 'First · Second'};
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
您还可以使用 react-16 中引入的门户通过使用以下代码将 React 组件附加到树中的任何位置。
ReactDOM.createPortal(child, container)
按照以下链接门户参考