是否可以在 React 中的 2 个功能组件之间传递数据？

Question

我在同一目录级别有两个组件。 Home 和 Checkout。不使用Class，是否可以在这两个页面之间传递数据？

function Homepage() {
  const [question, setquestion] = useState("");
  ....
  ....
 return (
    <input value={question} onChange={(e) => setquestion(e.target.value)} type="text"/>
 )
}

现在，在 Checkout 组件中，我需要访问该值。

function Checkoutpage({ socket, props }) {
   const [question, setquestion] = ??? [How do I access question from previous page];
}

Answer 1

您应该将 useState 保存在一个共同的父级中，并将其传递给主页和结帐页面

function Homepage({question,setquestion}) {
    return (
        <input value={question} onChange={(e) => setquestion(e.target.value)} type="text"/>
    )
}
function Checkoutpage({ socket, props,question,setquestion }) {
    question, setquestion // accesisable here
    return ...
}
function CommonParent(props) {
    const [question, setquestion] =  useState("");
    
    return <div>
        <Homepage {...{question, setquestion}}/>
        <Checkoutpage {...{question, setquestion}}/>
    </div>

}

是否可以在 React 中的 2 个功能组件之间传递数据？

Is it possible to pass data between 2 functional component in React?

reactjs

react-functional-component