在实时reactJS中将变量从组件传递到索引

Question

这样我就可以从index传递函数，并使用props在dashboard.js中调用它们，但现在我想做相反的事情，我希望在textfield有一些输入时更新index.js中的<h1>{projectName}</h1>，但我不知道如何做

index.js

import .....
export default Home() {
const dosth = () => {//some actions};
const session = () => {//sth in api};
return(
<div>
<div id="toolbar">
<h1>{projectName}</h1>
</ div>
<Dashboard session={session} dosth={dosth} />
</div>
)
}

dashboard.js

import .....
export default Dashboard({session, dosth}) {
useEffect(() => {dosth}, [session])
return(
const [projectName, setProjectName] = useState(null)
<Textfield value={projectName} onChange={(e) => setProjectName(e.target.value)} />
)
}

Answer 1

在这种情况下，您需要将您的状态提升到组件树上。。

在index.js中，您可以将usestate用于projectName，并将projectName和setProjectName作为道具传递给仪表板组件。

index.js

import .....
export default Home() {
const dosth = () => {//some actions};
const session = () => {//sth in api};
const [projectName, setProjectName] = useState(null)
return(
<div>
<div id="toolbar">
<h1>{projectName}</h1>
</ div>
<Dashboard session={session} dosth={dosth} projectName={projectName} setProjectName={setProjectName} />
</div>
)
}

dashboard.js

import .....
export default Dashboard({session, dosth, projectName, setProjectName}) {
useEffect(() => {dosth}, [session])
return(

<Textfield value={projectName} onChange={(e) => setProjectName(e.target.value)} />
)
}

Answer 2

实现这一点的一种方法是递归地将索引中的setState函数作为道具传递给子组件。

解决问题的另一种(更好的(方法是使用中央状态管理系统，如上下文或redux。请记住，redux需要大量的样板，所以您可能应该使用react上下文。