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

Question

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

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

我也能够将值作为表数据，但我想动态添加此表数据 显示更多/显示更少

如果项目大于 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

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

对于嵌套列内的嵌套显示更多，我们需要相同的逻辑，但对于较小的组件，我们需要将其分开以使其采用自己的状态

这是我的尝试：

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