父组件掉子组件的方法

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

1. Props 属性传递：父组件通过属性（props）将需要传递给子组件的方法作为属性传递给子组件，在子组件中直接调用该方法。例如：

// 父组件
function ParentComponent() {
  const handleClick = () => {
    console.log("Hello from parent component!");
  };

  return <ChildComponent onClick={handleClick} />;
}

// 子组件
function ChildComponent(props) {
  const { onClick } = props;

  return <button onClick={onClick}>Click Me</button>;
}

2. Refs 引用：父组件可以通过 Refs 的方式获取到子组件的实例，然后直接调用子组件的方法。例如：

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleClick = () => {
    this.childRef.current.childMethod();
  };

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleClick}>Click Me</button>
      </div>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  childMethod() {
    console.log("Hello from child component!");
  }

  render() {
    return <div>Child Component</div>;
  }
}

3. 使用 Context 上下文：通过使用 Context 上下文，父组件可以将方法传递给子组件，子组件可以在需要的地方通过上下文获取到该方法并进行调用。这种方式在跨多层级的组件传递方法时比较方便。具体实现方式较为复杂，这里不展示代码。