React js hook 父组件下有两个子组件， 子组件1如何直接调用子组件2的方法

在React中，子组件之间的通信通常是通过父组件进行传递。子组件1无法直接调用子组件2的方法，但可以通过父组件作为中介来实现。

一种常见的做法是将子组件2的方法定义在父组件中，然后将该方法通过props传递给子组件1和子组件2。子组件1可以调用该方法并将需要的参数传递给父组件，然后父组件再调用子组件2的方法并传递参数。

下面是一个示例代码：

// 父组件
import React from "react";
import ChildComponent1 from "./ChildComponent1";
import ChildComponent2 from "./ChildComponent2";

function ParentComponent() {
  const callChild2Method = (param) => {
    // 在这里可以调用子组件2的方法并传递参数
    // ...
  };

  return (
    <>
      <ChildComponent1 callChild2Method={callChild2Method} />
      <ChildComponent2 />
    </>
  );
}

export default ParentComponent;

// 子组件1
import React from "react";

function ChildComponent1({ callChild2Method }) {
  const handleClick = () => {
    // 调用父组件传递过来的方法，传递需要的参数
    callChild2Method("Hello from ChildComponent1");
  };

  return (
    <button onClick={handleClick}>Call ChildComponent2 method</button>
  );
}

export default ChildComponent1;

// 子组件2
import React from "react";

function ChildComponent2() {
  const child2Method = (param) => {
    // 子组件2的方法
    console.log("ChildComponent2 method called with param:", param);
  };

  return (
    <div>Child Component 2</div>
  );
}

export default ChildComponent2;

这样，当子组件1中的按钮被点击时，父组件的`callChild2Method`方法会被调用，然后父组件可以再调用子组件2的方法，并将参数传递给它。