如何解决反应:将状态或数据从父对象传递到对象中的子组件
我试图将状态或数据作为道具从父对象传递给处于状态对象中的孩子。单击父组件上的按钮时,子组件的div将显示true或false的更改。
将
如果子组件位于父组件的状态对象中,那么如何呈现更改?
请参考以下示例:
Parent.js(成功的代码)
import React,{ useState,useEffect } from 'react'
import Child from './Child'
function Parent() {
const [childs,setChilds] = useState()
const [toggle,setToggle] = useState(true)
const changeToggle = () => {
setToggle(!toggle)
}
useEffect(() => {
setChilds(<div><Child modeToggle={toggle} /></div>)
},[])
return (
<div>
<div>
<button onClick={changeToggle}>Change toggle</button>
</div>
<div>
<div><Child modeToggle={toggle} /></div>
</div>
</div>
)
}
export default Parent
Parent.js(失败的代码)
import React,[])
return (
<div>
<div>
<button onClick={changeToggle}>Change toggle</button>
</div>
<div>
{childs}
</div>
</div>
)
}
export default Parent
Child.js
import React,{ useEffect } from 'react'
function Child(props) {
useEffect(()=>{
console.log(props.modeToggle)
},[props.modeToggle])
return (
<div>{props.modeToggle.toString()}</div>
)
}
export default Child
Web浏览器的快照: Web snapshot
解决方法
问题在于效果挂钩中的toggle
位于陈旧的闭包中:
useEffect(() => {
setChilds(<div><Child modeToggle={toggle} /></div>)
},[])
上面的回调仅运行一次,因此存在的childs
始终具有modeToggle
初始值toggle
的{{1}}道具。即使调用true
,由于changeToggle
回调不会再次运行,因此useEffect
仍保留其初始的childs
属性。
我将有条件地渲染toggle
-将布尔值置于指示是否渲染的状态,这样就可以在父级返回的JSX中自然传递该道具:
childs
,
@CertainPerformance,感谢您的回答。我根据您的回答获得了类似的解决方案。非常感谢。
如果更新后的值在状态对象中,则似乎无法直接获取它。
import React,{ useState,useEffect } from 'react'
import Child from './Child'
function Parent() {
const [childs,setChilds] = useState()
const [toggle,setToggle] = useState(true)
const changeToggle = () => {
setToggle(!toggle)
}
useEffect(() => {
setChilds(<div><Child modeToggle={toggle} /></div>)
},[toggle])
return (
<div>
<div>
<button onClick={changeToggle}>Change toggle</button>
</div>
<div>
{childs}
</div>
</div>
)
}
export default Parent
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。