子级可以将父级中定义的函数作为 props，而不获取父级中定义的函数中数据的 props 吗？

Question

如果子组件具有从其父组件传递的函数的 props，比如说函数 foo，但是这个函数调用了另一个函数，比如说函数 bar，而 bar 仅在父组件中定义，我们是否必须传递酒吧也可以作为孩子的道具吗？

function ParentComponent() {

//both bar and foo are defined in parent

return (
<>
<ChildComponent foo={foo} />
</>
);
}

function ChildComponent({ foo }) {
...
}

function foo() {
  
  bar() //defined in parent, not passed to child
}

我尝试将函数作为道具从父级传递给子级，但我不确定结果是什么，因为该函数依赖于父级中定义的变量

Answer 1

您不必将 ParentComponent 中调用的函数传递给 ChildComponent。 这是一个例子...

export default function ParentComp() {
  const doSomethingElse = () => {
    console.log('Something else')
  }

  const handleSomething = (optional) => {
    console.log('Something')
    doSomethingElse()
  }

  return (
    <div>
      <ChildComp handleSomething={handleSomething} />
    </div>
  )
}

function ChildComp({ handleSomething }) {
  return (
    <div>
      <button onClick={handleSomething}>Click me</button>
      <button onClick={() => handleSomething('Hello world')}>Click me</button>
    </div>
  )
}