我试图将我的子组件存储在父构造函数中，作为类实例的属性。关于状态更改，我希望父级（因此是孩子）会重新显示，并且屏幕上的字母“ b”与“ a”相对应。为什么这不起作用？
状态更改时不显示“ b”
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {letter : "a"};
setTimeout(() => this.setState({letter: "b"}, 1000);
}
this.child= <Child letter = this.state.letter>
}
render() {
return this.child;
}
}
class Child extends React.Component {
render() {
<p>{this.prop.letter}</p>
}
}
但是，当我不将子组件存储为父组件的类属性，而是直接在render方法中对其进行呈现时，它将起作用。子组件反映了更改。这是因为render每次运行时都会创建一个新的JSX对象，并且通过将子jsx存储为父对象的属性，实际上就是在渲染那个旧的子对象？
在状态更改时正确显示“ b”
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {letter : "a"};
setTimeout(() => this.setState({letter: "b"}, 1000);
}
}
render() {
return <Child letter = {this.state.letter}/>;
}
}
class Child extends React.Component {
render() {
<p>{this.prop.letter}</p>
}
}```
您不能将对象作为render return语句返回，在大多数情况下应该是jsx这样，因此，如果您想以错误的方式进行操作，则需要这样的操作：
render() {
return <div>{this.child}</div>
}
但是，让我们看看为什么这是错误的，因为React更改state or props将导致重新提交，这就是为什么您需要将数据保存在这些位置，否则像您的情况一样（如果像我在上面显示的那样更改它，那是错误的），您会得到stale data和您说letter您要使用的Child组件是旧版本，不会更新
因此，以另一种方式说，该constructor函数将仅在初始化时调用，并且在您将其设置this.child attribute为letter的那一刻a，在1000ms状态将更改为letterb但您constructor不会再次调用该函数的情况下。因此您仍然具有旧的价值。
在平均时间，因为state已经从a以b render功能，如果你有会被再次调用，这里Child的组件render function作为jsx你的新数据
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句