根据条件显示/隐藏数组项：ReactJS

Question

我有一个网格，其中一列中可以包含项目数组。我需要实现的解决方案是，如果该列中有1个以上的项目，则需要显示“显示更多”，然后单击它应显示所有项目（以逗号分隔），并带一个“ Show Less”链接，隐藏除第一个项目以外的所有项目。此外，当没有数据时，只需对该列值显示“不可用”。我正在将react-table用于网格目的

我尝试了以下操作：https://codesandbox.io/s/react-table-row-table-mpk9s

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

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

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

  showMoreUtility = arr => {
    return <ShowMore value={arr} />;
  };

  getData = () => {
    const data = [
      { firstName: "Jack", status: "Submitted", items: [1, 2, 3, 4] },
      { firstName: "Simon", status: "Pending", items: [1, 2] },
      { firstName: "Syls", status: "Pending", items: [1, 2] },
      { firstName: "Pete", status: "Approved", items: [] }
    ];
    this.setState({ data });
  };

  getColumns = () => {
    const columns = [
      {
        id: "1",
        Header: "First Name",
        accessor: "firstName"
      },
      {
        id: "2",
        Header: "Status",
        accessor: "status"
      },
      {
        id: "3",
        Header: "Items",
        accessor: arr => this.showMoreUtility(arr.items)
      }
    ];
    this.setState({ columns });
  };

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

Answer 1

您快到了。 ShowMore组件需要进行一些修改，并且items列也不正确。

我编写了一个有效的ShowMore组件的示例，以显示如何完成此操作：

const ShowMore = props => {
  const { value } = props;
  const [isTruncated, setTruncate] = useState(true);
  const toggleTruncate = () => setTruncate(!isTruncated);
  if (value === undefined || value === null) {
    return null;
  }

  if (value.length === 0) {
    return 'Unavailable'
  }

  return (
    <div>
      {isTruncated ? value[0] : value}
      <span onClick={toggleTruncate}>
        {isTruncated ? "Show more" : "Show less"}
      </span>
    </div>
  );
};

当像这样修改ShowMoreItem组件时，它将起作用，但是根据react-table的规格，这不是使用它的正确方法。 accessor属性应用于检索正确的数据，而不是呈现自定义组件。对于自定义渲染，可以使用Cell属性。

修改项目列，如下所示：

accessor: "items", // This will get the 'items' attribute from the row.
Cell: row => {
  // This will render the ShowMore component with the correct value.
  return <ShowMore value={row.value} />;
}

Answer 2

根据沙箱中的代码，您可以在Cell列中添加items属性，并将该值传递给ShowMore组件：

{
  Header: "Items",
  accessor: "items",
  Cell: row => (
    <ShowMore value={row.value} />
  )
}

然后在ShowMore组件中将|| !value.length添加到您的条件中，以便在没有数据时返回Not Available

if (value === undefined || value === null || !value.length) {
  return 'Not Available';
}

还向div添加onClick事件以更新isTruncated的值并更改显示的数据：

function handleClick() {
  truncate(!isTruncated);
}

return (
  <div onClick={handleClick}>
    {
      isTruncated
      ?  <span>
          {value[0]} 
          {value.length > 1 && ' Show more'}
         </span>
      :  <span>
          {value.join(',')} 
          {value.length > 1 && ' Show less'}
         </span>
    }
  </div>
);