React を使用してコンポーネントを指定された DOM ノードにレンダリングする

今回は、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>

: hidden に設定されている場合に発生します。

たとえば、次のようになります:

実際に期待される効果は次のとおりです:

幸いなことに、明白ではありませんが、この問題を回避するかなり洗練された方法があります。私たちが学んだ最初の反応関数は render メソッドで、その関数シグネチャは次のようになります:

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;
 }
}

要約すると:

ComponentDidMount 中に p タグを本体に手動で挿入し、ReactDom.render を使用してコンポーネントをこの p タグにレンダリングします

コンポーネントをボディに直接レンダリングしたい場合は、コンポーネントの周りに RenderInBody のレイヤーをラップするだけです。

export default class Dialog extends Component{
 render(){
  return {
   <RenderInBody>i am a dialog render to body</RenderInBody>
  }
 }
}

翻訳者が追加されました:

上記のコンポーネントを変換することで、次のようにコンポーネントをレンダリングして指定された dom ノードにアンロードし、位置制御を追加できます。 注: 位置取得とルート ノードの判定関数

//此组件用于在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;
 }
}

この記事の事例を読んだ後は、方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Webページ上でドラッグされる画像のJS実装

React Nativeコンポーネントのライフサイクルはどれくらいですか

以上がReact を使用してコンポーネントを指定された DOM ノードにレンダリングするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。