[英]How can I render a component in DOM body even if some other component renders it in react?
我有一個組件，比如X ，它由我的app和DOM體中呈現。 我有另一個組件Y ，它由組件X渲染，但組件Y應該全屏打開。 所以，我需要在document.body渲染它，而不是在組件X即使X渲染它。
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 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>
只需在自己的<div>渲染每個組件：
<body>
<div id="app"></div>
<div id="Y"></div>
</body>
並分別渲染每個組件：
React.render(ComponentApp, document.getElementById("app"));
React.render(ComponentX, document.getElementById("X"));
如何防止每次父組件渲染時都渲染反應組件？
[英]How can I prevent a react component to render every time parent component renders?
如何使用react-router-dom定向鏈接以呈現填充有prop的常規post組件？
[英]How, using react-router-dom, can I direct a link to render a general post component, populated with props?
當參數組件使用反應路由器在 ReactJS 中渲染時，如何避免不必要的 HOC 組件重新渲染
[英]How can I avoid unnecessary re rendering of an HOC component, when the parameter component renders in ReactJS with react router
React Router - 即使不匹配也會呈現的 withRouter 組件
[英]React Router - withRouter component that renders even if no match
當react渲染一個組件時，它是否總是在非虛擬DOM上渲染？
[英]When react renders a component does it always render on the non-virtual DOM?
如何在包含渲染第一個組件的函數的組件之外渲染組件？
[英]How to render a component outside the component that contains the function that renders the first component?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.