Displaying/Hiding 基于条件的数组项：ReactJS

Question

我有一个网格，其中一列可以包含项目数组。我需要的是实施一个解决方案，如果该列有超过 1 个项目，需要显示 "Show more" 并且单击它应该显示所有项目（逗号分隔）并带一个 "Show Less " link 这将隐藏除第一个项目之外的所有项目。此外，当没有数据时，仅显示该列值的 "Not Available" 。我正在使用 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 添加到您的条件中，以便 return 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>
);

工作示例:

Displaying/Hiding 基于条件的数组项：ReactJS

Displaying/Hiding array items based on condition : ReactJS

javascript

setstate

ecmascript-6

reactjs

react-table