我正在学习做出反应,并在做一个更大的项目时创建了这个模型来显示我遇到的问题。
父级组件将状态值保持不变,并通过 props 传递给子级。我希望此值传播给孩子并在父状态下更改时在那里更新。在此代码的第一个版本中有效:
import React from "react"
import Child from './Child'
export default class Parent extends React.Component {
constructor() {
super();
this.state = {
single_val: false,
}
}
render() {
return(
<div className="Parent" style={{border: "solid orange 1px", padding: "15px"}}>
<p>Parent val: {this.state.single_val.toString()}</p>
<Child parent_val={this.state.single_val}/>
<Child parent_val={this.state.single_val}/>
<Child parent_val={this.state.single_val}/>
<div className="switch"
style={{height: "50px", width: "50px", backgroundColor: "lightPink"}}
onClick={(e)=>{this.setState({single_val: true})}}
>
</div>
</div>
)
}
}
但是,在项目的最终版本中,我需要动态创建子代。我是这样的:
import React from "react"
import Child from './Child'
export default class Parent extends React.Component {
constructor() {
super();
this.state = {
single_val: false,
children_divs: [],
}
this.setUp = this.setUp.bind(this);
}
componentDidMount() {
this.setUp();
}
setUp() {
var baseArray = [...Array(3)];
var children = baseArray.map((elem)=>{
return (<Child parent_val={this.state.single_val} />)
});
this.setState({children_divs: children});
}
render() {
return(
<div className="Parent" style={{border: "solid orange 1px", padding: "15px"}}>
<p>Parent val: {this.state.single_val.toString()}</p>
{this.state.children_divs}
<div className="switch"
style={{height: "50px", width: "50px", backgroundColor: "lightPink"}}
onClick={(e)=>{this.setState({single_val: true})}}
>
</div>
</div>
)
}
}
...和当我按下按钮并更改父母的状态时,该值不再传播给孩子:results screenshots。
如何保持子div的动态创建并仍然传播父值?我感觉到问题可能是因为值和子div数组都保持在父状态,但是我我不确定该如何解决。经过数小时的搜索和查看示例,我建议我应该从头开始重新创建子div-再次运行setUp-但对于一个我认为应该仍然传播的状态值来说,这似乎有些过头了。
子组件代码供参考:
import React from "react"
export default function Child(props) {
return (
<div className="Child">
<p>Child val: {props.parent_val.toString()}</p>
</div>
)
}
P.S。我什至尝试过向孩子添加componentDidUpdate()以尝试再次接收道具,但从未触发。
答案 0 :(得分:0)
好,所以这里的问题是您的children_divs
被创建一次,并且single_val
的值在那时被添加/发送(当您在setUp
函数中创建它们时)。
解决方案很简单,在render
函数中创建孩子,因为render
每次更改时都会调用state
。这也将children_divs
从状态中删除,因为它仅用于呈现并且没有其他目的。
import React from "react"
import Child from './Child'
export default class Parent extends React.Component {
constructor() {
super();
this.state = {
single_val: false,
}
}
render() {
var baseArray = [...Array(3)];
var children_divs= baseArray.map((elem)=>{
return (<Child parent_val={this.state.single_val} />)
});
return(
<div className="Parent" style={{border: "solid orange 1px", padding: "15px"}}>
<p>Parent val: {this.state.single_val.toString()}</p>
{children_divs}
<div className="switch"
style={{height: "50px", width: "50px", backgroundColor: "lightPink"}}
onClick={(e)=>{this.setState({single_val: true})}}
>
</div>
</div>
)
}
}