ReactのDOM操作

場合によっては、通常のデータ・ストリームの外で子を強制的に変更する必要があります.変更する子は、Reactコンポーネントインスタンスであってもよいし、DOM要素であってもよい.このとき、DOMを操作するためにrefsを使用します.
シーンの操作
以下に、refsを使用するのに適したいくつかの状況を示します.

処理フォーカス、テキスト選択またはメディア制御

トリガ強制アニメーション

サードパーティ製DOMライブラリ

を統合
宣言式で実現できる場合は、refsの使用はできるだけ避けます.Dialogコンポーネントに直接open()とclose()メソッドを露出しないで、isOpenプロパティを渡すことが望ましいことに注意してください.
ref
reactは、任意のコンポーネントに特殊なプロパティを追加することをサポートします.refプロパティは、コンポーネントがロードまたはアンインストールされるとすぐに実行されるコールバック関数を受け入れます.コンポーネントmountの後にrefを取得することに注意してください.componentWillMountと最初のrenderでは取得できません.componentDidMountでのみ取得できます.
html要素
HTML要素にref属性を追加すると、refコールバックは最下位のDOM要素をパラメータとして受信します.reactコンポーネントは、ロード時にDOM要素をrefのコールバック関数に転送し、アンインストール時にnullに転送します.refコールバックは、componentDidMountまたはcomponentDidUpdateのライフサイクルコールバックの前に実行されます.

class CustomTextInput extends React.Component {
    constructor(props) {
        super(props);
        this.focus = this.focus.bind(this);
    }
    focus() {
        this.textInput.focus();
    }
    render() {
        return(
            

                 { this.textInput = input; }} />
                
            
        )
    }
}

もっと短い書き方は以下の通りです.

ref={ input => this.textInput = input }

クラスコンポーネント
ref属性がclass宣言のカスタムコンポーネントを使用するために使用される場合、refのコールバックはロードされたReactインスタンスを受信する.

class AutoFocusTextInput extends React.Component {
    componentDidMount() {
        this.textInput.focusTextInput();
    }
    render() {
        return (
             { this.textInput = input; }} />
        );
     }
  }

なお,この方法はclass宣言のCustomTextInputにのみ有効である.
関数コンポーネント
インスタンスがないため、関数コンポーネントでrefプロパティを使用することはできません.
親コンポーネントへのDOMノードの露出
サブノードに特殊な属性を露出すると、サブノードは関数属性を取得し、それをref属性としてDOMノードに付加します.これにより、親は中間部品を介してrefを子のDOMノードにコールバックすることができる.

function Custom TextInput(props) {
  return(
    

      
    
  )
}

class Parent extends React.Component {
  render() {
    return (
       this.inputElement = el }
      />
    )
  }
}

上記の例では、Parentはそのrefコールバックを特殊なinputRefとしてCustomTextInputに渡し、CustomTextInputはref属性を介してそれを渡す.最終的には、Parentのthis.InputElementは、CustomTextInputの要素に対応するDOMノードに設定されます.
非管理コンポーネント
ステータス更新ごとにイベントハンドラを記述するのではなく、制御されたコンポーネントを記述するには、refを使用してDOMからフォーム値を取得します.注意、e.target.valueはreactをバインドすることなくDOM値を取得する.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(event) {
    alert("A name was submitted:" + this.input.value);
    event.preventDefault();
  }
  render() {
    return(
      

        
          Name:  this.input = input } />
        
        
      
    );
  }
}

非制御コンポーネントは実際のデータをDOMに保存するので、非制御コンポーネントを使用する場合、Reactコードと非Reactコードを同時に統合することが容易になります.
デフォルト
Reactのライフサイクルでは、フォーム要素のvalueプロパティがDOMの値を上書きします.制御されていないコンポーネントを使用する場合は、通常、Reactは初期値を指定できますが、後続の更新は制御されません.この問題を解決するには、valueではなくdefaultValue属性を指定します.

render() {
  return(
    

      
        Name:  this.input = input } />
      
     
    
  );
}

同様に、defaultCheckedをサポートし、defaultValueをサポートします.
ReactDOM
react-domというパッケージは、DOMに対する方法を提供し、アプリケーションのトップドメインで呼び出すことも、必要に応じてReactモデルから飛び出す出口として使用することもできる.しかし、ほとんどのコンポーネントはこのパッケージを使用する必要はありません.render() unmountComponentAtNode() findDOMNode()
render()

ReactDOM.render(
  element,
  container,
  [callback]
)

react要素をレンダリングし、提供されたcontainerにあるDOM要素に追加し、このコンポーネントの参照を返します(または、ステータスなしコンポーネントに対してnullを返します).このreact要素がcontainerにレンダリングされている場合、このコードは更新され、要素の最新の状態を反映するために必要なDOM要素だけが変更されます.
unmountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)

マウントされたReactコンポーネントをDOM要素から除去し、イベントプロセッサとstateをクリアします.コンテナにコンポーネントがマウントされていない場合、この関数は何もしません.コンポーネントがアンインストールされている場合はtrueを返し、アンインストール可能なコンポーネントがない場合はfalseを返します.
findDOMNode()

ReactDOM.findDOMNode(component)

このコンポーネントがDOMにマウントされている場合、関数は対応するブラウザで生成されたDOM要素を返します.この関数は、フォームの値やDOM要素のサイズなど、DOMから値を読み込む必要がある場合に便利です.ほとんどの場合、findDOMNodeという関数の使用を完全に回避するために、DOMノードへの参照を追加できます.renderがnullまたはfalseを返すとfindDOMNodeもnullを返します
新しいref
バージョン16.3以前、Reactにはrefを提供する2つの方法がありました.文字列とコールバックです.文字列の方法に問題があるので、公式にはコールバックを使用してrefを使用することをお勧めします.現在導入されているcreateRef APIは、公式には欠点のないrefを使う方式であり、コールバック方式も道を譲ることができると言われています.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return 
;
  }
}

然后使用current属性，即可获得当前元素 this.myRef.current，典型应用如下所示：

constructor(props) {
  super(props);
  this.Mask = React.createRef()
  this.MenuList = React.createRef()
}
handleClick = () => {
  ReactDOM.findDOMNode(this.MenuList.current).classList.toggle("transform-zero")
  ReactDOM.findDOMNode(this.Mask.current).classList.toggle("mask-show")
}

なお、styleComponentsを使用してスタイル化された要素が露出するインタフェースは、refではなくinnerRefである