今回は、React を使用して指定した DOM ノードにコンポーネントをレンダリングする場合と、React を使用して指定した DOM ノードにコンポーネントをレンダリングする場合の注意事項
を紹介します。以下は実際のケースです。見てみましょう。<a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>:hidden
誰もが知っているように、React の利点の 1 つは、その API が特にシンプルであることです。単純な関数と同様に、render メソッドを通じてコンポーネントの基本構造を返すことで、再利用可能な React コンポーネントを取得できます。ただし、特にその API では、コンポーネントがレンダリングされる DOM ノードを制御できないため、一部のエラスティック レイヤー コンポーネントの制御が困難になる場合があります。この問題は、親要素が <a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>
ReactComponent render( ReactElement element, DOMElement container, [function callback] )
ReactDom.render
方法将另一个组件渲染到一个指定的DOM 元素中。作为一个组件的render 方法,其必须是纯净的(例如:不能改变state或者与DOM交互).所以我们需要在componentDidUpdate 或者 componentDidMount 中调用ReactDom.render
通常、このメソッドを使用してアプリケーション全体を DOM ノードにレンダリングします。幸いなことに、この方法はそれだけではありません。コンポーネント内で メソッドを使用できます。
さらに、親要素がアンロードされるときに、変更されたコンポーネントもアンロードされることを確認する必要があります。
それを整理すると、次のコンポーネントが得られます:
import React,{Component} from 'react'; import ReactDom from 'react-dom'; export default class RenderInBody extends Component{ constructor(p){ super(); } componentDidMount(){//新建一个p标签并塞进body this.popup = document.createElement("p"); document.body.appendChild(this.popup); this._renderLayer(); } componentDidUpdate() { this._renderLayer(); } componentWillUnmount(){//在组件卸载的时候,保证弹层也被卸载掉 ReactDom.unmountComponentAtNode(this.popup); document.body.removeChild(this.popup); } _renderLayer(){//将弹层渲染到body下的p标签 ReactDom.render(this.props.children, this.popup); } render(){ return null; } }
export default class Dialog extends Component{ render(){ return { <RenderInBody>i am a dialog render to body</RenderInBody> } } }
//此组件用于在body内渲染弹层 import React,{Component} from 'react' import ReactDom from 'react-dom'; export default class RenderInBody extends Component{ constructor(p){ super(p); } componentDidMount(){ /** popupInfo={ rootDom:***,//接收弹层组件的DOM节点,如document.body left:***,//相对位置 top:***//位置信息 } */ let {popupInfo} = this.props; this.popup = document.createElement('p'); this.rootDom = popupInfo.rootDom; this.rootDom.appendChild(this.popup); //we can setAttribute of the p only in this way this.popup.style.position='absolute'; this.popup.style.left=popupInfo.left+'px'; this.popup.style.top=popupInfo.top+'px'; this._renderLayer() } componentDidUpdate() { this._renderLayer(); } componentWillUnmount(){ this.rootDom.removeChild(this.popup); } _renderLayer(){ ReactDom.render(this.props.children, this.popup); } render(){ return null; } }
React Nativeコンポーネントのライフサイクルはどれくらいですか
以上がReact を使用してコンポーネントを指定された DOM ノードにレンダリングするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。