ReactJS如何实现显示更多按钮

Question

当前，我使用映射显示10个活动报告中的10个活动报告(0,10('，我的第二步是实现一个" showmore"按钮以显示所有报告？我使用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>