Aja*_*aur 3 javascript reactjs
我有一个组件，例如X由我app和DOM主体呈现的一个组件。我有另一个Y由该组件呈现的组件，X但该组件Y应在全屏模式下打开。因此，即使渲染它，我也需要在document.body内部组件中渲染它。XX
React Components的结构为：
app
-X
-Y (in Full Screen)
现在的结构应如下所示：
<body>
<div class="X">
<div class="Y">
</div>
</div>
</body>
呈现的流应为：
app.body
-X
-Y
DOM结构应为：
<body>
<div class="X">
</div>
<div class="Y">
</div>
</body>
我怎样才能做到这一点。另外，我正在使用ES6类来制作react-components。
更新：从React 16开始，对门户正式支持。
门户网站提供了一种一流的方式来将子级呈现到父组件的DOM层次结构之外的DOM节点中。
我不建议使用此解决方案，因为它使用的是未记录的React API。提供免责声明，这里是：
class Portal extends React.Component {
componentDidUpdate() {
this._renderLayer();
}
componentDidMount() {
this._renderLayer();
}
componentWillUnmount() {
ReactDOM.unmountComponentAtNode(document.getElementById(this.props.container));
}
_renderLayer() {
ReactDOM.unstable_renderSubtreeIntoContainer(this, this.props.children, document.getElementById(this.props.container));
}
render() {
return null;
}
}
class Y extends React.Component {
render() {
return <div>Y</div>;
}
}
class X extends React.Component {
render() {
return (
<div>
X
<Portal container="Y">
<Y />
</Portal>
</div>
);
}
}
ReactDOM.render(<X/>, document.getElementById('X'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='X'></div>
<div id='Y'></div>| 归档时间： |
|
| 查看次数： |
1177 次 |
| 最近记录： |