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

【问题标题】：How to show/hide component on click in React-redux?如何在 React-redux 中单击时显示/隐藏组件？
【发布时间】：2016-08-26 04:05:22
【问题描述】：

我有一个组件：

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

我需要在初始加载时隐藏这个 ReplyForm。如何通过点击一个标签来触发它的状态？

【问题讨论】：

你真的在任何地方使用 Redux 吗？
很少有相关帖子here和here。

标签： reactjs redux

【解决方案1】：

这个怎么样？

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

【讨论】：

这种方式阻止了我收到类似的消息——警告：setState(...)：只能更新已安装或正在安装的组件“--

【解决方案2】：

您应该为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>
    )
  }
}

【讨论】：

你正在改变组件内部的状态。在 Redux 中可以吗？根据它的定义，状态由全局存储维护和变异。
@AftabNaveed 我只是试图表明您不需要 Redux 或任何其他额外的库来执行此类操作。但我猜你是对的，如果你使用 Redux，那么 showReply 应该放在 store 中。
如果我在尝试的组件之一中使用 setState出现或隐藏。有没有办法避免这个问题？
使用setState()不是违背了使用Redux的目的/没有回答问题吗？ OP 要求提供 Redux 解决方案，所以我认为他们想要相应地管理状态

【解决方案3】：

你可以试试rc-if-else模块

npm install --save rc-if-else

import React from 'react';
import { If } from 'rc-if-else';

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

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

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

【讨论】：