【React】组件父子通信以及父如何调用子的方法

父向子 「Props」

在父组件中，可以通过在子组件标签上的属性传递数据，子组件可以通过 props 来接收这些数据。

父组件：

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const data = '父组件中的数据';

  return (
    <div>
      <ChildComponent data={data} />
    </div>
  );
}

子组件

import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <p>{props.data}</p>
    </div>
  );
}

export default ChildComponent;

子向父「回调函数」

在子组件中，可以调用父组件传递的回调函数，并将需要传递的数据作为参数传递给这个函数，从而实现子组件向父组件传递数据。

父组件：

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [dataFromChild, setDataFromChild] = useState('');

  const handleDataFromChild = (data) => {
    setDataFromChild(data);
  };

  return (
    <div>
      <ChildComponent sendDataToParent={handleDataFromChild} />
      <p>子组件: {dataFromChild}</p>
    </div>
  );
}

子组件

import React from 'react';

function ChildComponent(props) {
  const sendData = () => {
    const data = '子组件中的数据';
    props.sendDataToParent(data);
  };

  return (
    <div>
      <button onClick={sendData}>测试</button>
    </div>
  );
}

export default ChildComponent;

父组件如何调用子组件中的方法

在某些情况下，需要父组件中触发子组件的方法。
使用 useRef 来获取子组件的引用，然后通过该引用调用子组件中的方法。

父组件：

import { useRef } from "react"

function ParentComponent() {
  const childRef = useRef(null);

  const handleClickInChild = () => {
    if (childRef.current) {
      childRef.current.handleClick();
    }
  };

  return (
    <div>
      <button onClick={handleClickInChild}>触发子组件方法</button>
      <ChildComponent ref={childRef} />
    </div>
  );
}

export default ParentComponent;

子组件：

import React, { useRef } from 'react';

function ChildComponent() {
  const handleClick = () => {
    console.log('111');
  };

  return (
    <div>
      <button onClick={handleClick}>测试</button>
    </div>
  );
}