Reactの親コンポーネントで子コンポーネントのメソッドを呼び出す方法

呼び出しメソッド: 1. クラス コンポーネントの呼び出しは、React.createRef()、ref または props のカスタム onRef 属性の関数宣言を使用して実装できます; 2. 関数コンポーネントとフック コンポーネントの呼び出しは、UseImperativeHandle またはforwardRef は、これを達成するために子コンポーネント ref をスローします。

#このチュートリアルの動作環境: Windows7 システム、react18 バージョン、Dell G3 コンピューター。

React では、子コンポーネント内で親コンポーネントのメソッドを呼び出すことが多く、通常は props コールバックを使用します。ただし、高い凝集性を実現するために、親コンポーネントで子コンポーネントのメソッドを呼び出す必要がある場合もあります。方法はたくさんありますので、必要に応じてご利用ください。

#クラス コンポーネント内

---

#1、React.createRef()

• 利点: 理解しやすく、参考文献によって指摘されています。

• 欠点: HOC を使用するサブコンポーネントは利用できず、実際のサブコンポーネントを指すことはできません
  たとえば、一般的に使用されるいくつかの記述方法、mobx の @observer によってラップされたサブコンポーネントは、これではありません。という方法が適用されます。

import React, { Component } from 'react';

class Sub extends Component {
  callback() {
    console.log('执行回调');
  }
  render() {
    return <div>子组件</div>;
  }
}

class Super extends Component {
  constructor(props) {
    super(props);
    this.sub = React.createRef();
  }
  handleOnClick() {
    this.sub.callback();
  }
  render() {
    return (
      <div>
        <Sub ref={this.sub}></Sub>
      </div>
    );
  }
}

2. ref の関数宣言

利点: ref の記述が簡単
• 欠点: HOC を使用するサブコンポーネントは利用できず、実際のサブコンポーネントを指すことはできません (同上)

使用方法は上記と同じですが、ref の定義方法が異なります。

...

<Sub ref={ref => this.sub = ref}></Sub>

...

3. 小道具を使用して onRef 属性をカスタマイズする

利点: サブコンポーネントが HOC でネストされている場合、実際のサブコンポーネントを指すこともできます。
• 欠点: props 属性をカスタマイズする必要がある

• import React, { Component } from 'react';
  import { observer } from 'mobx-react'
  
  @observer
  class Sub extends Component {
  	componentDidMount(){
      // 将子组件指向父组件的变量
  		this.props.onRef && this.props.onRef(this);
  	}
  	callback(){
  		console.log("执行我")
  	}
  	render(){
  		return (<div>子组件</div>);
  	}
  }
  
  class Super extends Component {
  	handleOnClick(){
         // 可以调用子组件方法
  		this.Sub.callback();
  	}
  	render(){
  		return (
            <div>
  			<div onClick={this.handleOnClick}>click</div>
  			<Sub onRef={ node => this.Sub = node }></Sub>	
  	   	  </div>)
  	}
  }

関数コンポーネント、フックコンポーネント

---

1、useImperativeHandle# ＃＃＃＃＃＃＃＃＃＃＃＃＃＃アドバンテージ： 1. 書き方がシンプルでわかりやすい。 2. サブコンポーネントにネストされた HOC がある場合、実際のサブコンポーネントを指すこともできます。欠点: 1. props 属性をカスタマイズする必要がある 2. 公開されたメソッドをカスタマイズする必要があります

import React, { useImperativeHandle } from 'react';
import { observer } from 'mobx-react'


const Parent = () => {
  let ChildRef = React.createRef();

  function handleOnClick() {
    ChildRef.current.func();
  }

  return (
    <div>
      <button onClick={handleOnClick}>click</button>
      <Child onRef={ChildRef} />
    </div>
  );
};

const Child = observer(props => {
  //用useImperativeHandle暴露一些外部ref能访问的属性
  useImperativeHandle(props.onRef, () => {
    // 需要将暴露的接口返回出去
    return {
      func: func,
    };
  });
  function func() {
    console.log(&#39;执行我&#39;);
  }
  return <div>子组件</div>;
});

export default Parent;

• 2. forwardRef
• forwardRef を使用してサブコンポーネントの ref をスローします

このメソッド実際にはカスタム HOC により適しています。しかし問題は、withRouter、connect、Form.create などのメソッドが ref をスローできないことです。Child 自体がこれらのメソッドをネストする必要がある場合、基本的にこれらのメソッドを一緒に使用することはできません。 forwardRef 自体は、input やその他のネイティブ要素などの子要素の ref をスローするためにも使用されますが、コンポーネントの使用シナリオが複雑すぎるため、コンポーネントの ref をスローするのには適していません。

import React, { useRef, useImperativeHandle } from 'react';
import ReactDOM from 'react-dom';
import { observer } from 'mobx-react'

const FancyInput = React.forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} type="text" />
});

const Sub = observer(FancyInput)

const App = props => {
  const fancyInputRef = useRef();

  return (
    <div>
      <FancyInput ref={fancyInputRef} />
      <button
        onClick={() => fancyInputRef.current.focus()}
      >父组件调用子组件的 focus</button>
    </div>
  )
}

export default App;

概要

親コンポーネントがサブコンポーネント関数を呼び出す場合は 2 つの状況があります。

サブコンポーネントには HOC ネストがありません。 ref を使用して直接呼び出してください。

HOC ネストがあります。カスタム プロパティを使用することをお勧めします。

[関連する推奨事項:
• Redis ビデオ チュートリアル
、
• プログラミング教育
]

以上がReactの親コンポーネントで子コンポーネントのメソッドを呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。