React-Table：指定可选列（取决于结果集可用性）

Question

在 React-Table 中，我正在使用 useMemo 构建我的 table 列，如下所示，

// React-Table Columns
const columns = React.useMemo(
    () => [
        {
            Header: "requesterEmail",
            accessor: "requesterEmail",
            isVisible: true
        },
        {
            Header: "Date Submitted",
            accessor: "actionDate",
            isVisible: true
        },
  ...

table 由多个组件共享，某些组件可能会传入包含额外列的结果集。如果可用，我想包括这些列。我想做类似

的事情

        /* The Frequency only applies in some cases, e.g. depending on prop, 
            or availability of accessor */ 
        {props.someprop === 'special' &&
            {
                Header: "Special Column",
                accessor: "specialColumn",
                isVisible: true             
            }
        },

或

/* Check availability of accessor? */ 
{specialColumn &&
    {
        Header: "Special Column",
        accessor: "specialColumn",
        isVisible: true             
    }
},

这可能吗？

Answer 1

Yes.You可以通过在useMemo的依赖中添加props.someprop来做到这一点。

const columns = React.useMemo(() => {
  const result = [
    {
      Header: "requesterEmail",
      accessor: "requesterEmail",
      isVisible: true,
    },
    {
      Header: "Date Submitted",
      accessor: "actionDate",
      isVisible: true,
    },
    ...
  ];
  if (props.someprop === "special") {
    result.push({
      Header: "Special Column",
      accessor: "specialColumn",
      isVisible: true,
    });
  }

  return result;
}, [preDependencies, props.someprop]);