如果这两个组件都在同一个文件中，并且函数没有绑定到任何钩子，那么就在组件外定义它。这样，你就不需要把它作为一个道具通过组件树传递，也不会在重新呈现时被重新定义。

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

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

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

希望这对你有帮助。

你不能把props从child传递到parent。你能做的是在parent组件中呈现child，然后把函数和props一起传递给child。比如：

function Parent() {

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

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

function Child({handleClick}) {

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

就像其他人提到的，你应该尝试从Parent传递到Child，我认为你可能尝试从Child到Parent获取一个 value，这是常见的情况。在这种情况下，你仍然从Parent传递函数到Child，但是通过函数的args从Child传递一个 value 到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

也许你指的是像这样的东西？

function Parent() {
  return (
    <div>
      <Child dataToParent={(msg) => console.log(msg)} />
    </div>
  );
}

 function Child({dataToParent}) {

  const handleAbort=() =>{
    dataToParent('hello')
  }
  return (
    <div>
       <button onclick={handleAbort}></button>
    </div>
  );
}