javascript - 在 React 中更改成员变量的状态不起作用
问题描述
我有一个类 Box2,我在 Box1 中创建了一个实例
Box1 只是呈现 Box2 的实例,但是对我拥有的实例使用 setState 并没有改变
import React from 'react';
import ReactDOM from 'react-dom';
class Box2 extends React.Component{
constructor(props){
super(props);
this.state={text:"No"};
}
render(){
return(
<h1>
{this.state.text}
</h1>
);
}
}
export default class Box1 extends React.Component{
Elements=[];
constructor(){
super();
this.Elements[0]=new Box2();
this.Elements[0].setState({text:"YES"});
}
render(){
return(<div>
{this.Elements.map((e)=>e.render())};
</div>
);
}
}
解决方案
您不能更改子组件的状态。相反,您应该使用道具:
class Box2 extends React.Component{
render(){
return(
<h1 onClick={this.props.onClick}>
{this.props.text}
</h1>
);
}
}
export default class Box1 extends React.Component {
constructor(props) {
super(props);
this.state = {
isBox2Yes: true,
};
this.onBoxClick = this.onBoxClick.bind(this);
}
onBoxClick() {
this.setState({ isBox2Yes: !this.state.isBox2Yes });
}
render(){
return(
<div>
<Box2
text={this.state.isBox2Yes ? 'YES' : 'NO'}
onClick={this.onBoxClick}
/>
</div>
);
}
}