reactjs - 如何在 React-redux 中单击时显示/隐藏组件？

Question

我有一个组件:

class CommentBox extends Component {
    render() {
        return (
            <div>
                <p>Some comment</p>
                <a>Post a reply to this comment</a>
            </div>
            <ReplyForm />
        )
    }
}

我需要在初始加载时隐藏此ReplyForm。如何通过点击标签来触发其状态？

Answer 1

您应该向 CommentBox 的状态添加一些标志。如果此标志的值为 false，则不显示 ReaplyFrom，反之亦然。这是代码和工作示例 http://codepen.io/anon/pen/KzrzQZ

class ReplyForm extends React.Component {
  constructor() {
    super()
  }
  render(){
    return(
      <div>I'm ReplyForm</div>
    )
  }
}

class CommentBox extends React.Component {
  constructor() {
    super();
    this.state = {
      showReply: false
    }
  }
  onClick(e){
    e.preventDefault();
    this.setState({showReply: !this.state.showReply})
  }
  render() {
    return (
      <div>
        <p>Some comment</p>
         <a onClick={this.onClick.bind(this)} href='#'>Post a reply to this comment</a>
        {this.state.showReply && < ReplyForm / >}
      </div>
    )
  }
}