React 中，怎么实现父组件调用子组件中的方法？

在 React 中，父组件调用子组件中的方法可以通过以下几种方式实现：

通过 ref 调用：

首先，给子组件添加 ref 属性。
然后，在父组件中通过 ref 调用子组件的方法。

jsx 复制代码

// 子组件
function ChildComponent(props, ref) {
  const handleClick = () => {
    console.log('子组件方法被调用');
  };

  React.useImperativeHandle(ref, () => ({
    handleClick
  }));

  return <button onClick={handleClick}>点击我</button>;
}

// 父组件
function ParentComponent() {
  const childRef = React.useRef(null);

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

  return (
    <>
      <ChildComponent ref={childRef} />
      <button onClick={callChildMethod}>调用子组件方法</button>
    </>
  );
}

通过 props 传递函数：

将子组件的方法作为 props 传递给子组件。
在子组件中通过 props 调用传递的方法。

jsx 复制代码

// 子组件
function ChildComponent({ onButtonClick }) {
  return <button onClick={onButtonClick}>点击我</button>;
}

// 父组件
function ParentComponent() {
  const handleButtonClick = () => {
    console.log('子组件方法被调用');
  };

  return <ChildComponent onButtonClick={handleButtonClick} />;
}

使用 Context API：

如果需要在多个组件之间共享方法，可以使用 Context API。

jsx 复制代码

// 创建 Context
const MyContext = React.createContext(null);

// 子组件
function ChildComponent() {
  const value = React.useContext(MyContext);
  return <button onClick={value.handleClick}>点击我</button>;
}

// 父组件
function ParentComponent() {
  const handleButtonClick = () => {
    console.log('子组件方法被调用');
  };

  return (
    <MyContext.Provider value={{ handleClick: handleButtonClick }}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

这些方法可以根据具体需求和场景选择使用。通常情况下，通过 props 传递函数是最简单和常用的方式。