ReactJS非表示にするかどうかを切り替える方法

Question

私はReactとES6の構文にはとても新しいです。ヘッダーをクリックすると表示と非表示に切り替えたいチャットウィジェットがあります。私はすでにonClickハンドラを実装していますしかし、ロジックに関しては、オンラインで同様の実装を見つけるのが難しいです。これは私のコードです：

import React, {Component} from 'react'; 
import chat from './styles.css'; 
import {connect} from 'react-redux'; 

class ChatWidget extends Component { 

    handleClick(event) { 
    console.log("Hide or unhide chat body") 
    } 

    render() { 
    return (
     <div className={chat.container}> 
     <div onClick={this.handleClick.bind(this)} 
      className={chat.header}> 
      <span className={chat.name}>Idol</span> 
     </div> 
     <div className={chat.body}> 
      This is the Body of the chat 
     </div> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    user: state.activeUser 
    }; 
} 

export default connect(mapStateToProps)(ChatWidget); 

Answer 1

は身体を表示するかどうか、現在の状態を保存しますstate変数を使用してください。その変数に基づいて、conditional renderingと呼ばれるチャートの本文をレンダリングします。

チェックこの：

class ChatWidget extends Component { 

    constructor(){ 
     super(); 
     this.state={isShowBody: true} 
    } 

    handleClick(event) { 
     this.setState({isShowBody: !this.state.isShowBody}) 
    } 

    render() { 
     return (
      <div className={chat.container}> 
       <div onClick={this.handleClick.bind(this)} className={chat.header}> 
        <span className={chat.name}>Idol</span> 
       </div> 
       {this.state.isShowBody ? 
        <div className={chat.body}> 
         This is the Body of the chat 
        </div> 
       : null} 
      </div> 
     ); 
    } 
} 

Answer 2

何ができるかは

.hidden { 
    display: none; 
} 

そして動的に<div class={chat.body}にそのクラスを切り替えるCSSクラスを作成することです。

これで、divを取得しやすくなるようにdivにIDを追加します。

<div class={chat.body} id='chat-body'> 
    ... 
</div> 

そして、あなたの​​方法

handleClick(event) { 
    let chat = document.getElementById("chat-body"); 

    chat-body.classList.toggle('hidden') 
} 

Answer 3

の内側にそれは次のようになります。

class ChatWidget extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     showChat: true 
    }; 
 } 
    handleClick(event) { 
    this.setState({ 
     showChat: !this.state.showChat 
    }); 
    } 

    render() { 
    return (
     <div className={chat.container}> 
     <div onClick={this.handleClick.bind(this)} 
      className={chat.header}> 
      <span className={chat.name}>Idol</span> 
     </div> 
     {this.state.showChat && 
     (<div className={chat.body}> 
      This is the Body of the chat 
     </div>) 
     } 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    user: state.activeUser 
    }; 
} 

export default connect(mapStateToProps)(ChatWidget); 

しかし、条件付きのレンダリングのための異なるアプローチがあります。 ここにドキュメントを参照してください：https://facebook.github.io/react/docs/conditional-rendering.html

Answer 4

ここでは例がありますが、行にコメントがあり、各行が何をしているのか分かります。

コンポーネントにhiddenクラスを追加すると、それをアンマウントしないであろうことを考えてみましょう、それだけでDOM

import React, {Component} from 'react'; 
import chat from './styles.css'; 
import {connect} from 'react-redux'; 

class ChatWidget extends Component { 
    // You need state to update the view 
    state = { 
    show: false 
    } 

    toggleBody() { 
    // You can pass true or false to this function to show or hide the body 
    this.setState({show: !this.state.show}) 
    } 

    render() { 
    {/* Take the show property from the state */} 
    const {show} = this.state 
    return (
     <div className={chat.container}> 
     <div onClick={this.toggleBody.bind(this)} className={chat.header}> 
      <span className={chat.name}>Idol</span> 
     </div> 
     {/* Add the class hidden to the body if show is false (you should create the hidden class in CSS) */} 
     <div className={`${chat.body} ${show ? '' : 'hidden'}`}> 
      This is the Body of the chat 
     </div> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    user: state.activeUser 
    }; 
} 

export default connect(mapStateToProps)(ChatWidget);