javascript - ReactJS 如何实现显示更多按钮？

Question

目前，我使用映射来显示带有“切片(0,10)”的 10 个事件报告，我的第二步是实现“显示更多”按钮来显示所有报告？我使用 Reactjs 来实现我的代码。 我已经在 stackoverflow 上读过一些关于这个主题的帖子，但我仍然不知道从哪里开始。

下面是我的代码:

import React, { Component } from 'react';
import FontAwesome from 'react-fontawesome';
class RewardActivity extends Component {
    constructor(props) {
        super(props);
        this.state = {
            rewardActivities: this.props.reward.rewardsAccount.rewardsActivities
        };

        this.state.rewardActivities.map(function (d, i) {
            if (d.activityType === 'EARN_STARS') {
                d.icon =
                    < FontAwesome
                        name='starfar fa-star-o'
                        size='2x'
                        border='true'
                        style={{ color: 'white', background: 'orange', border: 'orange', }
                        } />
            }
            else if (d.activityType === 'ISSUED_REWARD') {
                d.icon =
                    < FontAwesome
                        name='fas fa-trophy  -0'
                        size='2x'
                        border='true'
                        style={{ color: 'white', background: '#38ACEC', border: '#38ACEC', }
                        } />
            }
        })
    }
    render() {
        return (
            <div>
                <div className="welcome-content__events">
                    <div className="welcome-content__events__title">
                        Activity
          </div>
                    <div data-events-list-content>
                        {
                            this.state.rewardActivities.slice(0, 10).map(function (d, i) {

                                return (
                                    <div key={i} className="welcome-content__events__table-row">
                                        <div className="welcome-content__event__type-img">
                                            {d.icon}
                                        </div>
                                        <div>
                                            <div className="welcome-content__event__title">{d.title}</div>
                                            <div className="welcome-content__event__subtitle">{d.dateTime}</div>
                                        </div>
                                    </div>
                                )
                            })}
                    </div>
                </div>
            </div>
        );
    }
}

export default RewardActivity;

Answer 1

使用状态来显示更多内容。正如您现在所看到的，默认显示为 10。 单击该按钮时，将状态更改为“显示全部”，然后您可以为整个列表设置该状态。

下面是一个示例应用程序，它可以做到这一点:

class App extends React.Component{
  constructor (props) {
    super(props)
    this.state = {
      showMore: false
    }
  }
  handleClick() {
    this.setState({showMore: true})
  }
  render(){
    const list = [
      'list 1',
      'list 2',
      'item 3',
      'item 4',
      'item 5',
      'item 6',
      'item 7',
      'item 8',
      'item 9',
      'item 10',
      'item 11',
      'item 12',
      'item 12',
      'item 14',
      'item 15',
      'item 16',
      'item 17',
      'item 18',
    ]
    
    const numberOfItems = this.state.showMore ? list.length : 10
    return (
     <div>
        {list.slice(0, numberOfItems).map((item)=> {
          return (
          <div>{item}</div>
           )
        })}
        <button onClick={()=> this.handleClick()}>Show more</button>
     </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

<div id="app"></div>    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>