为单元格中的表格实现显示更多/显示更少：ReactJS

Question

我正在尝试为嵌套的对象数组实现一个表格，我想在该列的一个单元格中显示它，就像具有显示更多/显示更少功能的表格一样。

沙盒：https://codesandbox.io/s/react-table-row-table-g8ws3

我也可以将值作为表格数据，但我想通过 Show more / Show less 动态添加这个表格数据

如果项目超过 2，则希望输出类似于 show more，然后是 show less 的切换

我正在为这个应用程序使用react table v6

+-----------+-----------+-----+-----------------+
| firstname | status    | age | nested          |
+-----------+-----------+-----+-----------------+
| Jack      | Submitted | 14  | name  value     |
|           |           |     | -----------     |
|           |           |     | test1  NA       |
|           |           |     |                 |
|           |           |     | test2  NA       |
|           |           |     |                 |
|           |           |     |  Show More/Less |
+-----------+-----------+-----+-----------------+
| Simon     | Pending   | 15  | name  value     |
|           |           |     |                 |
|           |           |     | -----------     |
|           |           |     |                 |
|           |           |     | test3  NA       |
|           |           |     |                 |
|           |           |     |                 |
|           |           |     | test4  Go       |
|           |           |     |                 |
|           |           |     | Show More/Less  |
+-----------+-----------+-----+-----------------+

import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      columns: [],
    };
  }

  componentDidMount() {
    this.getData();
    this.getColumns();
  }

  getData = () => {
    const data = [
      {
        firstName: "Jack",
        status: "Submitted",
        nested: [
          {
            name: "test1",
            value: "NA"
          },
          {
            name: "test2",
            value: "NA"
          }
        ],
        age: "14"
      },
      {
        firstName: "Simon",
        status: "Pending",
        nested: [
          {
            name: "test3",
            value: "NA"
          },
          {
            name: "test4",
            value: "Go"
          }
        ],
        age: "15"
      }
    ];
    this.setState({ data });
  };

  getColumns = () => {
    const columns = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Status",
        accessor: "status"
      },
      {
        Header: "Age",
        accessor: "age"
      },
      {
        Header: "Nested",
        id: "nested",
        accessor: data =>
          data.nested.map(item => (
            <div>
              <span style={{ marginRight: "10px" }}>{item.name}</span>
              <span>{item.value}</span>
            </div>
          ))
      }
    ];
    this.setState({ columns });
  };

  render() {
    return (
      <>
        <DataGrid
          data={this.state.data}
          columns={this.state.columns}
        />
      </>
    );
  }
}

Answer 1

首先您需要在将数据设置为状态后决定将呈现多少数据，默认状态将是带有“显示更多”按钮的两个元素，因此，您需要触发一个状态for 是否单击了按钮，并且根据此状态呈现的项目应该是， 要将按钮插入表格，您需要将其作为最后一个子元素插入到数组中，而无需仅填充列表末尾的按钮

对于嵌套列内的更多嵌套显示，我们需要类似的逻辑，但对于较小的组件，为此，我们需要将其分开以使其具有自己的状态

这是我的尝试：

import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";
import Nested from "./Nested.js";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      data: [],
      columns: [],
      clicked: false,
      text: "show more"
    };
  }

  componentDidMount() {
    this.getData();
    this.getColumns();
  }

  onClick = () => {
    this.setState(
      prevState => {
        const text = !prevState.clicked ? "show less" : "show more";
        return {
          clicked: !prevState.clicked,
          text
        };
      },
      () => this.formatData()
    );
  };

  getData = () => {
    const data = [
      {
        firstName: "Jack",
        status: "Submitted",
        nested: [
          {
            name: "test1",
            value: "NA"
          },
          {
            name: "test2",
            value: "NA"
          },
          {
            name: "test5",
            value: "NA"
          }
        ],
        age: "14"
      },
      {
        firstName: "Simon",
        status: "Pending",
        nested: [
          {
            name: "test3",
            value: "NA"
          },
          {
            name: "test4",
            value: "Go"
          },
          {
            name: "test6",
            value: "NA"
          },
          {
            name: "test7",
            value: "NA"
          }
        ],
        age: "15"
      },
      {
        firstName: "Simon2",
        status: "Pending",
        nested: [
          {
            name: "test3",
            value: "NA"
          },
          {
            name: "test4",
            value: "Go"
          }
        ],
        age: "15"
      }
    ];
    this.setState(() => ({ data }), () => this.formatData());
  };

  getColumns = () => {
    const columns = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Status",
        accessor: "status"
      },
      {
        Header: "Age",
        accessor: "age"
      },
      {
        Header: "Nested",
        id: "nested",
        accessor: data => <Nested data={data.nested} />
      }
    ];
    this.setState({ columns });
  };

  formatData = () => {
    const clickBtn = {
      firstName: <button onClick={this.onClick}>{this.state.text}</button>
    };
    if (this.state.clicked) {
      const items = [...this.state.data, clickBtn];
      this.setState({ items });
    } else {
      const items = [...this.state.data.slice(0, 2), clickBtn];
      this.setState({ items });
    }
  };

  render() {
    return (
      <>
        <DataGrid data={this.state.items} columns={this.state.columns} />
      </>
    );
  }
}

render(<App />, document.getElementById("root"));

和嵌套文件：

import * as React from "react";

class Nested extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      data: [],
      clicked: false,
      text: "show more"
    };
  }

  componentDidMount() {
    this.setState(() => ({ data: this.props.data }), () => this.formatData());
  }

  onClick = () => {
    this.setState(
      prevState => {
        const text = !prevState.clicked ? "show less" : "show more";
        return {
          clicked: !prevState.clicked,
          text
        };
      },
      () => this.formatData()
    );
  };

  formatData = () => {
    console.log(this.state.data);

    const clickBtn = {
      type: "btn",
      component: <button onClick={this.onClick}>{this.state.text}</button>
    };
    if (this.state.clicked) {
      const items = [...this.state.data, clickBtn];
      this.setState({ items });
    } else {
      const items = this.state.data && [
        ...this.state.data.slice(0, 2),
        clickBtn
      ];
      this.setState({ items });
    }
  };

  render() {
    const { items } = this.state;
    return (
      <>
        {items &&
          items.map(item =>
            item.type === "btn" ? (
              !!item.component && item.component
            ) : (
              <div>
                <span style={{ marginRight: "10px" }}>{item.name}</span>
                <span>{item.value}</span>
              </div>
            )
          )}
      </>
    );
  }
}

export default Nested;

沙盒：https://codesandbox.io/s/react-table-row-table-zpiyo