React - 从另一个组件更新使用 state

Question

我想更新此用途 state 以便在单击<FirstPage />组件中的按钮时应更新 state。
我有点卡住了实现这一目标的最佳方法是什么？

const SignUp = () => {
    const [display, setDisplay] = useState(true);
    const onClick = () => {
        setDisplay(false);
    };

    return (
        <>
            { display? <FirstPage changeState={onClick}/> : <SecPage/> }    
        </>
    );
}

Answer 1

另一种方法是将 setDisplay 项传递给 FirstPage，然后在 FirstPage 组件中设置它。

如在

    return (
          <>
            { display? <FirstPage setDisplay={setDisplay}/> : <SecPage/> }    
          </>
     );

然后您可以使用 onclick 更改 FirstPage 组件中的显示 state 以将 function 调用为 setDisplay(false)，如下所示。 然后你会调用 function 使用 onClick={buttonClicked()}

   const buttonClicked = () => {
        setDisplay(false);
   }