是否有可能在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放在一个共同的父元素中，并把它传递给主页和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>
}