根据访问器值有条件地渲染单元格数据

Question

刚开始使用 react-table，试图找出如何根据访问器值有条件地呈现某些内容。我从 api 调用中取回了一些数据，并将其中一个值用于访问器。

{
   Header: "Action",
   id: "startTime",
   accessor: "attributes.startTime"
}

所以我有一个包含 header "Action" 的列，在这里我想有条件地呈现一个按钮，如果访问器值 attrbiutes.startTime === null 或类似的东西。

UI 的呈现发生在不同的文件中，因此我还需要在那里访问它以处理按钮 onClick

我这里有一个 codesandbox working example。

Answer 1

您可以使用自定义单元格渲染器

const columns = [

  {
     Header: "Action",
     id: "startTime",
     accessor: "attributes.startTime",
     Cell: props => {
        return props.value === null ? <button>Click Me </button> : props.value;
     }
  }
];

根据访问器值有条件地渲染单元格数据

Conditionally rendering cell data based on accessor value

reactjs

react-table