Javascript 我有一张物品清单。我想在第一行显示8个项目。如果列表长度超过8，则添加一个“显示更多”按钮

我正在获取

类别数据中的对象列表

{this.props.categoryData.map((data) => (
              <div class=" p-0" style={{ width: "12%" }}>
                <div class="th-cat-link">
                  <img
                    alt=" "
                    src={data.photo_desktop}
                    width="50"
                    class="fluid-image"
                  />
                  <p class="th-cat-name">{data.package_category_name}</p>
                </div>
              </div>
            ))}

{this.props.categoryData.map（（数据）=>(
{data.package\u category\u name}
))}

如果列表长度超过8，如何在第8位添加显示更多。单击“显示更多”后，剩余部分将显示在下一行中。使用“切片”仅取8，检查长度是否超过8将显示该按钮

{
     this.props.categoryData.slice(0,8).map((data) => (
              <div class=" p-0" style={{ width: "12%" }}>
                <div class="th-cat-link">
                  <img
                    alt=" "
                    src={data.photo_desktop}
                    width="50"
                    class="fluid-image"
                  />
                  <p class="th-cat-name">{data.package_category_name}</p>
                </div>
              </div>
            ))
}
{
     this.props.categoryData.length > 8 && <button>Show More</button>
}

{
this.props.categoryData.slice（0,8）.map（（数据）=>(
{data.package\u category\u name}
))
}
{
this.props.categoryData.length>8&显示更多信息
}
试试这个

import React, { Fragment, Component } from "react";

class App extends Component {
  render() {
    return (
      <Fragment>
        {this.props.categoryData.map((data) => (
          <div class=" p-0" style={{ width: "12%" }}>
            <div class="th-cat-link">
              <img
                alt=" "
                src={data.photo_desktop}
                width="50"
                class="fluid-image"
              />
              <p class="th-cat-name">{data.package_category_name}</p>
            </div>
          </div>
        ))}
        {this.props.categoryData.length > 8 && <button>Show More</button>}
      </Fragment>
    );
  }
}


export default App

import React，{Fragment，Component}来自“React”；
类应用程序扩展组件{
render（）{
返回(
{this.props.categoryData.map（（数据）=>(
{data.package\u category\u name}
))}
{this.props.categoryData.length>8&&Show More}
);
}
}
导出默认应用程序
这对我很有用

state = {
    isMore: false,
  };
  handleMoreTheme = () => {
    let moreClicked = this.state.isMore;
    this.props.handleMore(!moreClicked);
  };
render() {
    
    var allActivity = (
      <React.Fragment>
        {this.props.categoryData.map((data) => (
          <div class=" p-0" style={{ width: "11.11%" }}>
            <div class="th-cat-link">
              <img
                alt=" "
                src={data.photo_desktop}
                width="50"
                class="fluid-image"
              />
              <p class="th-cat-name">{data.package_category_name}</p>
            </div>
          </div>
        ))}
      </React.Fragment>
    );
    var lessActivity = (
      <React.Fragment>
        {this.props.categoryData.slice(0, 8).map((data) => (
          <div class=" p-0" style={{ width: "11.11%" }}>
            <div class="th-cat-link">
              <img
                alt=" "
                src={data.photo_desktop}
                width="50"
                class="fluid-image"
              />
              <p class="th-cat-name">{data.package_category_name}</p>
            </div>
          </div>
        ))}
      </React.Fragment>
    );
    return (
      
          <div
            class="row">
            {this.state.isMore ? allActivity : lessActivity}
            <div
              class=" p-0"
              style={{ width: "11.11%" }}
              onClick={() => this.handleMoreTheme()}
            >
              <div class="th-cat-link ">
                <img alt=" " src={E1} class="fluid-image" />
                <p class="th-cat-name">
                  {this.state.isMore ? "Less Theme" : "More Theme"}
                </p>
              </div>
            </div>
          </div>
    );
  }

状态={
伊斯莫尔：错，
};
handleMoreTheme=（）=>{
让moreClicked=this.state.isMore；
这个.props.handleMore（！moreClicked）；
};
render（）{
var allActivity=(
{this.props.categoryData.map（（数据）=>(
{data.package\u category\u name}
))}
);
var lessActivity=(
{this.props.categoryData.slice（0,8）.map（（数据）=>(
{data.package\u category\u name}
))}
);
返回(
{this.state.isMore？allActivity:lessActivity}
this.handleMoreTheme（）}
>

{this.state.isMore？“更少主题”：“更多主题”}

);
}
感谢@ali的回复。我想在Show More上的onClick事件之后添加新行中的剩余项。如何添加新行？您可以在状态中存储
8
的值，当按钮调用您将该状态加倍时，您将执行此操作，让我们调用该值
displaySize
例如
this.props.categoryData.slice（0，this.state.displaySize）.map（…