如何将函数从孩子传递给父母

Question

基本上我有一个函数是我的子组件，我想将这个函数作为 prop 传递并称它为我的父组件。

 function parent() {
  return (
    <div>
      <button onclick={handleAbort}></button>
    </div>
  );
}


 function child() {

  const handleAbort=() =>{
    console.log('hello')
  }
  return (
    <div>
    </div>
  );
}

Answer 1

如果这两个组件都在同一个文件中，并且该函数未绑定到任何挂钩，则在组件外部定义它。这样，您不需要将它作为 prop 传递给组件树，并且它不会在重新渲染时被重新定义。

const handleAbort = () => {
  console.log('hello');
};

function parent() {
  return (
    <div>
      <button onclick={handleAbort}></button>
    </div>
  );
}

function child() {
  return <div></div>;
}

希望这可以帮助。

Answer 2

您不能将道具从孩子传递给父母。您可以做的是在父组件中渲染子组件，然后将带有道具的函数传递给子组件。就像是：

function Parent() {

  const handleAbort=() =>{
    console.log('hello')
  }

  return (
    <div>
      <Child handleClick={handleAbort} />
    </div>
  );
}


function Child({handleClick}) {

  return (
    <div>
      <button onClick={handleClick}></button>
    </div>
  );
}

Answer 3

正如其他人所提到的，您应该尝试从父级传递给子级，我认为您可能想要做的是获得一个价值从 Child 到 Parent，这种情况经常发生。在那种情况下，您仍然将函数从父级传递给子级，但传递一个价值通过函数的参数从子对象到父对象 - 例如

function Parent() {
  const handleAbortClick = (msg) => (e) => {
    console.log(msg)
  }
  return (
    <div>
      <Child onAbortClick={handleAbortClick} />
    </div>
  );
}


 function Child({ onAbortClick }) {  
  return (
    <div>
      <button onClick={onAbortClick('hello')}>Click me</button>
    </div>
  );
}

https://codesandbox.io/s/intelligent-haze-dj8rr3?file=/src/App.js