如何将回调函数传递给React中的兄弟组件

Question

如何将回调函数传递给同级组件，以便其中一个组件中的按钮可以触发另一个组件中的操作?下面的代码是一个例子，我做了一个尝试，最终无限重置状态在Index.js

import React, {useState} from "react"
const ComplexComponent = ({setCallbackFunction}) => {
setCallbackFunction(() => console.log("hello world"))
return <div/>
}
const Button = ({onClick}) => {
return (
<button onClick={onClick}>
Submit
</button>
)
}
export default function Index() {
const [callbackFunction, setCallbackFunction] = useState(() => {})
// EXPECTED: callbackFunction should log "hello world" after clicking Button
// ACTUAL: state is reset infinitely
return (
<>
<ComplexComponent setCallbackFunction={setCallbackFunction} />
<Button onClick={callbackFunction}/>
</>
)
}

Answer 1

在这种情况下，函数在初始化后立即执行。下面的例子中，函数没有返回任何东西。它只是打印初始立即。因为它没有返回任何东西，undefined将被设置为callbackFunction变量。

const [callbackFunction, setCallbackFunction] = React.useState(() =>
console.log('initial')
);

解决方案:用另一个函数包装该函数。因此，外部函数返回内部函数而不是undefined

const [callbackFunction, setCallbackFunction] = React.useState(
() => () => console.log('initial')
);

现在您可以重置回调函数，再次使用包装器函数。没有包装器和之前一样。函数将立即执行并打印hello world

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

为了避免不同组件的渲染错误，请考虑使用useEffect.

const ComplexComponent = ({ setCallbackFunction }) => {
React.useEffect(() => {
setCallbackFunction(() => () => console.log('hello world'));
}, []);
return <div />;
};