如何在ReactJS动态表格中添加列显示条件控制？

要实现Email和Phone列（包括表头）的条件性显示，核心思路是根据条件动态生成列数组，而不是仅在单元格内控制内容显示。具体修改如下：

方法一：拆分基础列与可选列（直观易懂） #

const App = (props) => {
  const [condition, setCondition] = useState(true);
  
  // 定义始终显示的基础列
  const baseColumns = [{
    Header: "Name",
    accessor: "name",
  }];
  
  // 根据condition决定是否添加Email、Phone列
  const optionalColumns = condition ? [
    {
      width: 150,
      Header: "Email",
      accessor: "email",
      Cell: (props) => <div>{props.row.values.email}</div>,
    },
    {
      width: 150,
      Header: "Phone",
      accessor: "phone",
      Cell: (props) => <div>{props.row.values.phone}</div>,
    }
  ] : [];
  
  // 合并最终的列数组
  const columns = [...baseColumns, ...optionalColumns];

  return (
    <>
      <BasicTable 
        columns={columns}
        tableType="default">
      </BasicTable>
    </>
  );
};
export default App;

方法二：使用数组过滤（简洁高效） #

如果想保留原列数组的定义方式，也可以用filter方法直接筛选需要显示的列：

const App = (props) => {
  const [condition, setCondition] = useState(true);
  
  const columns = [
    {
      Header: "Name",
      accessor: "name",
    },
    {
      width: 150,
      Header: "Email",
      accessor: "email",
      Cell: (props) => <div>{props.row.values.email}</div>,
    },
    {
      width: 150,
      Header: "Phone",
      accessor: "phone",
      Cell: (props) => <div>{props.row.values.phone}</div>,
    }
  ].filter(col => {
    // 规则：Name列始终显示；Email/Phone列仅在condition为true时显示
    return col.accessor === "name" || condition;
  });

  return (
    <>
      <BasicTable 
        columns={columns}
        tableType="default">
      </BasicTable>
    </>
  );
};
export default App;

说明 #

两种方法的本质都是让表格仅接收需要显示的列数组：

• 当condition为false时，Email和Phone列不会被包含在columns中，表格自然不会渲染这两列的表头和内容
• 同时可以去掉原Cell组件中的条件判断，因为只有条件满足时该列才会存在，无需额外判断

内容的提问来源于stack exchange，提问作者Rohit Verma