在 React 中更改成员变量的状态不起作用

Question

我有一个 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>
        );
    }
}

Answer 1

您不能更改子组件的状态。相反，您应该使用道具：

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>
    );
  }
}