admin管理员组文章数量:1025478
I have a ponent, say X which is rendered by my app and in the DOM-body. I have another ponent Y which is rendered by the ponent X but the ponent Y should be opened in full-screen. So, I need to render this in document.body rather inside ponent X even if X renders it.
React Components' structure is:
app
-X
-Y (in Full Screen)
the structure now should look like:
<body>
<div class="X">
<div class="Y">
</div>
</div>
</body>
and the rendered flow should be :
app.body
-X
-Y
and the DOM structure should be:
<body>
<div class="X">
</div>
<div class="Y">
</div>
</body>
How can I do this. Also, I am using ES6 classes for making react-ponents.
I have a ponent, say X which is rendered by my app and in the DOM-body. I have another ponent Y which is rendered by the ponent X but the ponent Y should be opened in full-screen. So, I need to render this in document.body rather inside ponent X even if X renders it.
React Components' structure is:
app
-X
-Y (in Full Screen)
the structure now should look like:
<body>
<div class="X">
<div class="Y">
</div>
</div>
</body>
and the rendered flow should be :
app.body
-X
-Y
and the DOM structure should be:
<body>
<div class="X">
</div>
<div class="Y">
</div>
</body>
How can I do this. Also, I am using ES6 classes for making react-ponents.
Share Improve this question edited Aug 24, 2016 at 12:42 Ajay Gaur asked Aug 24, 2016 at 12:37 Ajay GaurAjay Gaur 5,2807 gold badges40 silver badges63 bronze badges2 Answers
Reset to default 5UPDATE: Starting from React 16, there is official support for portals.
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent ponent.
I wouldn't remend to use this solution as it is using an undocumented React API. Disclaimer provided, here it is:
class Portal extends React.Component {
ponentDidUpdate() {
this._renderLayer();
}
ponentDidMount() {
this._renderLayer();
}
ponentWillUnmount() {
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./ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='X'></div>
<div id='Y'></div>Simply render each of your ponent in their own <div>:
<body>
<div id="app"></div>
<div id="Y"></div>
</body>
And render each ponent separately:
React.render(ComponentApp, document.getElementById("app"));
React.render(ComponentX, document.getElementById("X"));
I have a ponent, say X which is rendered by my app and in the DOM-body. I have another ponent Y which is rendered by the ponent X but the ponent Y should be opened in full-screen. So, I need to render this in document.body rather inside ponent X even if X renders it.
React Components' structure is:
app
-X
-Y (in Full Screen)
the structure now should look like:
<body>
<div class="X">
<div class="Y">
</div>
</div>
</body>
and the rendered flow should be :
app.body
-X
-Y
and the DOM structure should be:
<body>
<div class="X">
</div>
<div class="Y">
</div>
</body>
How can I do this. Also, I am using ES6 classes for making react-ponents.
I have a ponent, say X which is rendered by my app and in the DOM-body. I have another ponent Y which is rendered by the ponent X but the ponent Y should be opened in full-screen. So, I need to render this in document.body rather inside ponent X even if X renders it.
React Components' structure is:
app
-X
-Y (in Full Screen)
the structure now should look like:
<body>
<div class="X">
<div class="Y">
</div>
</div>
</body>
and the rendered flow should be :
app.body
-X
-Y
and the DOM structure should be:
<body>
<div class="X">
</div>
<div class="Y">
</div>
</body>
How can I do this. Also, I am using ES6 classes for making react-ponents.
Share Improve this question edited Aug 24, 2016 at 12:42 Ajay Gaur asked Aug 24, 2016 at 12:37 Ajay GaurAjay Gaur 5,2807 gold badges40 silver badges63 bronze badges2 Answers
Reset to default 5UPDATE: Starting from React 16, there is official support for portals.
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent ponent.
I wouldn't remend to use this solution as it is using an undocumented React API. Disclaimer provided, here it is:
class Portal extends React.Component {
ponentDidUpdate() {
this._renderLayer();
}
ponentDidMount() {
this._renderLayer();
}
ponentWillUnmount() {
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./ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='X'></div>
<div id='Y'></div>Simply render each of your ponent in their own <div>:
<body>
<div id="app"></div>
<div id="Y"></div>
</body>
And render each ponent separately:
React.render(ComponentApp, document.getElementById("app"));
React.render(ComponentX, document.getElementById("X"));
本文标签：
版权声明：本文标题：javascript - How can I render a component in DOM body even if some other component renders it in react? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745633930a2160327.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论