将状态从子类传递给父类

Question

我知道这可能是关于 React 被问到最多的问题，但没有一个答案对我有帮助。我有两个班级：孩子class Preview extends Component {constructor(...args) {        super(...args);        this.state = {            isCommentOpen: false        };this.handleComment = ::this.handleComment;render() {return(button type="button" onClick={this.handleComment}>Comment</button>         )}handleComment(){        this.setState({isCommentOpen: !this.state.isCommentOpen});               }        export default Preview;家长class Profile extends Component { render(){        return(        <div>             <_.Preview />//the place where I want to add validation from the component above             {this.state.isCommentOpen ? <span>Cool</span> : null}       </div>}

Answer 1

您不应该改变或直接分配this.props，如另一个答案所示：

this.props.isCommentOpen = !this.props.isCommentOpen // <-- DON'T DO THIS! 🎃

相反，你应该有一个回调函数让父组件更新子组件：

class Profile extends Component {

  constructor(props) {

    super(props);

    this.state = {

      isCommentOpen: false;

    }

    this.handleComment = this.handleComment.bind(this); // <-- important!

  }

  handleComment() {

    this.setState({ isCommentOpen: !this.state.isCommentOpen });

  }

  render() {

    return (

      <div>

        <Preview handleComment={this.handleComment} />

        { this.state.isCommentOpen ? <span>Cool</span> : null }

      </div>

    )

  }

}

export default Profile

然后子组件只需要调用this.props.handleComment：

// Child Component:

class Preview extends Component {

render() {

  return(

    <button type="button" onClick={this.props.handleComment}>Comment</button>

  }

}

export default Preview;