reactjs 如何将函数从子级传递到父级

k2fxgqgv  于 2022-11-22  发布在  React
关注(0)|答案(4)|浏览(137)

基本上我有一个函数是我的子组件,我想把这个函数作为一个道具传递,并称它为我的父组件。

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

 function child() {

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

tquggr8v1#

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

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

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

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

希望这对你有帮助。

yc0p9oo0

yc0p9oo02#

你不能把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>
  );
}
zpgglvta

zpgglvta3#

就像其他人提到的,你应该尝试从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

pkmbmrz7

pkmbmrz74#

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

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>
  );
}

相关问题