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

Question

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

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

标签： reactjsreact-functional-component

Answer 1

您应该将您的 useState 保存在一个共同的父级中，并将其传递给 Homepage 和 Checkoutpage

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>

}