ReactJS 如何切换元素以隐藏或显示答案

【问题标题】：ReactJS How to toggle elements to hide or showReactJS 如何切换元素以隐藏或显示
【发布时间】：2017-03-29 16:07:51
【问题描述】：

我对 React 和 ES6 语法非常陌生无法在线找到类似的实现。这是我的代码：

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

【问题讨论】：

标签： reactjs ecmascript-6 redux

【解决方案1】：

它可能看起来像这样：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

你可以做的是创建一个css类

.hidden {
  display: none;
}

并在您的 <div class={chat.body} 上动态切换该类。

所以在 div 中添加一个 id 以便于抓取。

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

在您的 handleClick 方法中

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

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

【讨论】：

这只是一种 js 方法，但绝对不是一个好的 react 方法！

【解决方案4】：

这里有一个例子，它的行上有 cmets，所以你知道每行在做什么。

考虑将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);

【讨论】：