React :对表实现Show/More

Question

我正在尝试实现与表相关的show more/show less功能。只有当有两个以上的元素时，Show More/ Show less链接才是可见的，而显示较少的元素应该将其设置为默认的项目数(在我的例子中是2)。Show More应该打印其余的项目。我正在使用react表，因为same.There是一个数据网格组件，在这里我传递必要的道具，并试图在子组件中实现这个逻辑。

我试过以下几种方法。有人能告诉我哪里出了问题吗？

沙箱：https://codesandbox.io/s/react-table-row-table-ryiny?file=/src/index.js

import React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

export default class DataGrid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showMore: false,
    };
  }

  toggleState = () => {
    this.setState(prevState => ({
      showMore: !prevState.showMore
    }), () => {
      const subset: = this.state.showMore ? this.props.data : this.props.data.slice(0, 2);
    });
  }

  renderTableData = () => {
    const { data } = this.props;
    const subset = this.state.showMore ? data : data.slice(0, 2);
    return subset;
  };

  render() {
    const { showMore  } = this.state;
    const { data,columns } = this.props;
    const showLink = data.length > 2;
    return (
            <>
            {showLink && (
              <a onClick={this.toggleState}>
                Show {showMore ? "Less" : "More")}
              </a>
            )}
          <ReactTable
            showPagination={false}
            data={data}
            columns={columns}
          />
        </>
    )
  }
}

Answer 1

“列”处于道具状态，而不是状态，如果这是您唯一需要的功能，那么删除renderTableData函数

尝尝这个

...

export default class DataGrid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showMore: false,
    };
  }

  toggleState = () => {
    this.setState(prevState => ({
      showMore: !prevState.showMore
    }));
  }

  render() {
    const { showMore } = this.state;
    const { data, columns } = this.props;
    const showLink = data.length > 2;
    const subset = showMore ? data : data.slice(0, 2);
    return (
            <>
            {showLink && (
              <a onClick={this.toggleState}>
                Show {showMore ? "Less" : "More"}
              </a>
            )}
          <ReactTable
            showPagination={false}
            data={subset}
            columns={columns}
          />
        </>
    )
  }
}