在 React 中显示更多信息答案

【问题标题】：Show more info in React在 React 中显示更多信息
【发布时间】：2017-07-06 22:08:28
【问题描述】：

我想在点击时显示更多信息，但我有不同的 div 要显示/隐藏。所以。我这样做：状态是：

this.state = {
        showMore: false,
        showRewards: false,
        fees: false,
        showFees: false
    };

其中一个 div：

                      <div className='some'>
                          <h3 >Rewards <i className="icon-im-rewards"></i></h3>
                                  <h5 className="showMoreDetails" onClick={ () => this.show('rewards') }>{ showRewards ? '-' : '+' } { showRewards ? 'Show Less' : 'Show More' }</h5>
                          {   showRewards && detail.rewards.reward.map((name, i) =>
                                  <p key={i}> { name }</p>
                              )
                          }
                      </div>

功能：

显示（名称）{ 让 { showMore, showRewards, showFees } = this.state;

if (name === 'hightlights' && showMore === false) {
    this.setState({
        showMore: true
    });
} else {
    this.setState({
        showMore: false
    });
}

if (name === 'rewards' && showRewards === false) {
    this.setState({
        showRewards: true
    });
} else {
    this.setState({
        showRewards: false
    });
}

if (name === 'fees' && showFees === false) {
    this.setState({
        showFees: true
    });
} else {
    this.setState({
        showFees: false
    });
}

这太长了，丑陋而且不能正常工作（我一次只能看到一个扩展的 div）如何改进它？

【问题讨论】：

标签： javascript reactjs if-statement state show-hide

【解决方案1】：

这是一种更好更清洁的方式：

function show (name) { 

  let { showMore, showRewards, showFees } = this.state;
  showMore = name === 'hightlights' && showMore === false;
  showRewards = name === 'rewards' && showRewards === false;
  showFees = name === 'fees' && showFees === false;

  this.setState({
    showFees,
    showRewards, 
    showMore
  });

【讨论】：

好多了，但我还是一次只能看到一个

【解决方案2】：

如果您能向我们展示详细信息和奖励的结构，可能会更容易。我猜你在这里映射一个元素，这就是它打印单个元素的原因。但是，尝试更改此行，

detail.rewards.reward.map((name, i) => <p key={i}> { name }</p> )

替换为以下代码：

detail.rewards.map((reward, i) => <p key={i}> { reward.name }</p> )

【讨论】：