Javascript 如何实现显示更多按钮？

目前，我使用映射来显示带有“slice（0,10）”的10个活动报告，我的第二步是实现一个“SHOWMORE”按钮来显示所有报告？我使用Reactjs来实现我的代码。 我已经读了一些关于stackoverflow的帖子，但是我仍然不知道从哪里开始

下面是我的代码：

import React，{Component}来自'React'；
从“react FontAwesome”导入FontAwesome；
类报酬活动扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
奖励活动：this.props.raward.rewardsAccount.rewardsActivities
};
this.state.rewardActivities.map（函数（d，i）{
如果（d.activityType==='EARN_STARS'）{
d、 图标=
太棒了
name='starfar fa-star-o'
尺寸='2x'
边界class='true'
样式={{颜色：白色，背景：橙色，边框：橙色，}
} />
}
否则，如果（d.activityType==‘已发放奖励’）{
d、 图标=
太棒了
name='fas足总杯-0'
尺寸='2x'
边界class='true'
样式={{颜色：白色，背景：'#38ACEC'，边框：'#38ACEC'，}
} />
}
})
}
render（）{
返回(
活动
{
this.state.rewardActivities.slice（0，10）.map（函数（d，i）{
返回(
{d.icon}
{d.title}
{d.dateTime}
)
})}
);
}
}
导出默认报酬活动使用状态显示更多信息。正如您现在看到的，默认值是显示10。
单击按钮时，将状态更改为“全部显示”，然后可以为整个列表设置该状态

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


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
肖莫尔：错
}
}
handleClick（）{
this.setState（{showMore:true}）
}
render（）{
常数列表=[
"名单一",，
"名单2",，
“项目3”，
“项目4”，
“项目5”，
“项目6”，
“项目7”，
“项目8”，
“项目9”，
“项目10”，
“项目11”，
“项目12”，
“项目12”，
“项目14”，
“项目15”，
“项目16”，
“项目17”，
“项目18”，
]
const numberOfItems=this.state.showMore？list.length:10
返回(
{list.slice（0，numberOfItems）.map（（项）=>{
返回(
{item}
)
})}
this.handleClick（）}>显示更多信息
);
}
}
ReactDOM.render(
,
document.getElementById（'app'）
);
单击触发器a
设置状态
可切换
渲染
函数中的项目<代码>{this.state.show？{items}:null}