Comment appeler la méthode du composant enfant dans le composant parent React

Méthode d'appel : 1. Les appels dans les composants de classe peuvent être implémentés à l'aide de React.createRef(), de la déclaration fonctionnelle de l'attribut onRef personnalisé ref ou props ; 2. Les appels dans les composants de fonction et les composants Hook peuvent être implémentés à l'aide de useImperativeHandle ou forwardRef throw Utiliser le sous-composant. ref pour y parvenir.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version React18, ordinateur Dell G3.

Dans React, nous appelons souvent des méthodes de composants parents dans des composants enfants, généralement à l'aide de rappels d'accessoires. Mais parfois, il est également nécessaire d'appeler la méthode du composant enfant dans le composant parent pour obtenir une cohésion élevée. Il existe de nombreuses méthodes, prenez-les selon vos besoins.

Dans les composants de classe

---

1, React.createRef()

• Avantages : facile à comprendre, pointé avec la réf.

• Inconvénients : les sous-composants utilisant HOC ne sont pas disponibles et ne peuvent pas pointer vers de vrais sous-composants

  Par exemple, certaines méthodes d'écriture couramment utilisées, telles que les sous-composants enveloppés dans @observer de mobx, ne s'appliquent pas à cette méthode.

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. Déclaration fonctionnelle de ref

• Avantages : l'écriture de la référence est simple
• Inconvénients : les sous-composants utilisant HOC ne sont pas disponibles et ne peuvent pas pointer vers de vrais sous-composants (comme ci-dessus)

Méthode d'utilisation et supérieure Pareil, mais la manière de définir ref est différente.

...

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

...

3. Utilisez des accessoires pour personnaliser l'attribut onRef

• Avantages : Si le sous-composant est imbriqué avec HOC, il peut également pointer vers le sous-composant réel.
• Inconvénients : besoin de personnaliser les attributs des accessoires

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

Composant de fonction, composant Hook

---

1, utilisezImperativeHandle

• Avantages : 1. La méthode d’écriture est simple et facile à comprendre. 2. Si le sous-composant a un HOC imbriqué, il peut également pointer vers le vrai sous-composant
• Inconvénients : 1. Besoin de personnaliser les attributs des accessoires 2. Vous devez personnaliser la méthode exposée

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

Utilisez forwardRef pour lancer la référence du sous-composant

Cette méthode est en fait plus adaptée à la personnalisation de HOC. Mais le problème est que withRouter, connect, Form.create et d'autres méthodes ne peuvent pas lancer de référence. Si Child lui-même doit imbriquer ces méthodes, elles ne peuvent fondamentalement pas être utilisées ensemble. forwardRef lui-même est également utilisé pour lancer des références d'éléments enfants, tels que des entrées et d'autres éléments natifs. Il ne convient pas pour lancer des références de composants car les scénarios d'utilisation des composants sont trop complexes.

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;

Résumé

Il existe deux situations dans lesquelles un composant parent appelle une fonction de composant enfant

• Pas d'imbrication HOC des composants enfants : il est recommandé d'utiliser ref pour appeler directement
• Avec l'imbrication HOC : il est recommandé d'utiliser une fonction personnalisée props

【Recommandations associées : Tutoriel vidéo Redis, Enseignement de la programmation】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!