Reactjs 从不同组件调用组件内部的函数

我使用react，我有两个组件。在Comp1内部，我有一个函数，我想在Comp2内部调用它。我怎么能这样做

代码：

const Comp1=（）=>{
//在Comp2中调用handleSetSearch
常量handleSetSearch=（）=>{
常量值=document.querySelector（'.ais SearchBox input'）。值；
console.log（值）
};
返回(
../
);
}
常量Comp2=（handleSetSearch）=>{
返回(

)
};

在

react

中，使用

道具与组件进行通信非常常见。例如，如果
Comp 1
和
Comp 2
之间的关系是父子关系，则可以使用
props
获得
handleSetSearch
的功能

Const Comp1 = () => {
  const handleSetSearch = () => {
    const value = document.querySelector('.ais-SearchBox-input').value;
    console.log(value)
  };

  return (
    <>
      <Comp2 handleSetSearch={handleSetSearch} />
    </>
  )
}

Const Comp2 = (props) => {
  return (
    <div>
      <p onClick={props.handleSetSearch}></p>
    </div>
  )
}

您应该在Comp1中作为孩子使用Comp2，并将Comp1函数作为道具传递到Comp2

const Comp1 = () => {
    const handleSetSearch = () => {};
    return (
    <>
      <Comp2 handleSetSearch={handleSetSearch} />
    </>
    );
}


const Comp2 = ({handleSetSearch}) => {
    return (
        <div>
         <p onClick={() => handleSetSearch()}></p>
        </div>
    )
};

const Comp1=（）=>{
const handleSetSearch=（）=>{}；
返回(
);
}
常量Comp2=（{handleSetSearch}）=>{
返回(
handleSetSearch（）}>
)
};
我能否通过props.handleSetSearch将值传递给handleSetSearch函数？
const handleSetSearch = (params) => {
  console.log(params)
};

<p onClick={() => props.handleSetSearch('123')}></p>

const Comp1 = () => {
    const handleSetSearch = () => {};
    return (
    <>
      <Comp2 handleSetSearch={handleSetSearch} />
    </>
    );
}


const Comp2 = ({handleSetSearch}) => {
    return (
        <div>
         <p onClick={() => handleSetSearch()}></p>
        </div>
    )
};