Question

目前，我使用map来显示带有'slice（0,10）'的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。单击该按钮时，将状态更改为show all，然后可以为整个列表设置。

以下是一个示例应用程序，它将完全执行此操作：

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>

ReactJS如何实现Show More Button？

1 个答案: