Cara memanggil kaedah komponen anak dalam komponen induk React

Kaedah panggilan: 1. Panggilan dalam komponen kelas boleh dilaksanakan menggunakan React.createRef(), pengisytiharan fungsi ref atau props atribut onRef tersuai 2. Panggilan dalam komponen fungsi dan komponen Hook boleh dilaksanakan menggunakan UseImperativeHandle atau forwardRef membuang ref komponen kanak-kanak untuk mencapai ini.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi react18, komputer Dell G3.

Dalam React, kami sering memanggil kaedah komponen induk dalam komponen anak, biasanya menggunakan panggil balik props. Tetapi kadangkala ia juga perlu untuk memanggil kaedah komponen kanak-kanak dalam komponen induk untuk mencapai perpaduan yang tinggi. Terdapat banyak kaedah, ambil mengikut keperluan.

Dalam komponen kelas

---

1 React.createRef()

• <.>Kelebihan: Mudah difahami, tunjuk dengan ref.

• Kelemahan: subkomponen menggunakan HOC tidak tersedia dan tidak boleh menunjuk kepada subkomponen sebenar
  Sebagai contoh, beberapa kaedah penulisan biasa, subkomponen yang dibalut oleh @observer of mobx bukan This kaedah terpakai.

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. Pengisytiharan fungsi ref

Kelebihan: penulisan ref adalah mudah
• Kelemahan: Subkomponen menggunakan HOC tidak tersedia dan tidak boleh menunjuk ke subkomponen sebenar (sama seperti di atas)

Kaedah penggunaan adalah sama seperti di atas, tetapi cara mentakrifkan ref adalah berbeza.

...

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

...

3 Gunakan prop untuk menyesuaikan atribut onRef

Kelebihan: Jika sub-komponen bersarang dengan HOC, ia juga boleh menunjuk ke subkomponen sebenar.
• Kelemahan: Perlu menyesuaikan atribut 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>)
	}
}

Komponen fungsi, komponen Cangkuk

---

1. useImperativeHandle

Kelebihan: 1. Kaedah penulisan yang ringkas dan mudah difahami. 2. Jika subkomponen mempunyai HOC bersarang, ia juga boleh menunjuk kepada subkomponen sebenar
• Kelemahan: 1. Perlu menyesuaikan atribut props 2. Perlu menyesuaikan kaedah terdedah

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

Gunakan forwardRef untuk membuang ref subkomponen

ini Kaedah ini sebenarnya lebih sesuai untuk HOC tersuai. Tetapi masalahnya ialah denganRouter, connect, Form.create dan kaedah lain tidak boleh membuang ref Jika Child sendiri perlu menyarangkan kaedah ini, maka ia pada dasarnya tidak boleh digunakan bersama. forwardRef sendiri juga digunakan untuk membuang ref elemen kanak-kanak, seperti input dan elemen asli yang lain Ia tidak sesuai untuk melontar ref komponen kerana senario penggunaan komponen terlalu kompleks.

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;

Ringkasan

Terdapat dua situasi apabila komponen induk memanggil fungsi subkomponen

Subkomponen tidak mempunyai sarang HOC: ia adalah disyorkan untuk menggunakan ref untuk memanggil terus
• Dengan HOC bersarang: adalah disyorkan untuk menggunakan prop tersuai

[Cadangan berkaitan:

Tutorial video Redis, Pengajaran pengaturcaraan]

Atas ialah kandungan terperinci Cara memanggil kaedah komponen anak dalam komponen induk React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!