如何在點擊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> 
    ) 
    } 
} 

Answer 2

這個怎麼樣？

class CommentBox extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     showForm: false 
    } 
    } 

    render() { 
    const showHide = { 
     'display': this.state.showStatus ? 'block' : 'none' 
    }; 

    const showReplyForm =() => { 
     this.setState({showForm: true}); 
    }; 

    return (
     <div> 
     <div> 
      <p>Some comment</p> 
      <a onClick={showReplyForm}>Post a reply to this comment</a> 
     </div> 
     <div style={showStatus}> 
      <ReplyForm /> 
     </div> 
     </div> 
    ) 
    } 
}