web-dev-qa-db-ja.com

ReactDOM.findDOMNode（）は現在非推奨になっているため、代替手段は何ですか？

FindDOMNode（）を使用している古いコードがあります。

これが私のコードです、someComponent1とExpandがすでにインポートされています

ここで、findDOMNode（）を使用して作成したコードが完全に正常に機能していることを疑っていますが、廃止されたため、削除したいと思います。私は多くのドキュメントを調べたところ、これの代わりにポータルまたは参照を使用することがわかりました。私がrefを使用している場合、それにバインドされる変数もDOM要素へのアクセス権を持っていることは理解していますが、そのように機能しているため、私は間違っていると思います。誰かがこれについて私の理解を正してくれませんか

class classA extends Component {

  componentDidMount() {
    new Expand(ReactDOM.findDOMNode(this.expand))
    // new Expand(this.expand)    
  }

  render(){

    return(
      <someComponent1 className={style.container} ref={e => this.expand= e}/>
    )
  }
}
reactjsrefrefs
7
Bishal Jain

このgithubの問題およびReactDocs、ReactDOM.findDOMNodeは非推奨ではありませんが、その使用はお勧めできません。エスケープハッチとしてのみ使用してください。それを置き換えるために、あなたのケースでは次のようになるDOM要素にrefを指定する必要があります

class classA extends Component {

  componentDidMount() {
     new Expand(this.expand)    
  }

  render(){

    return(
      <SomeComponent1 className={style.container} innerRef={e => this.expand= e}/>
    )
  }
}

class SomeComponent1 extends React.Component {
    render() {
       return <div ref={this.props.innerRef}>Hello</div>
    }
}
2
Shubham Khatri