ReactJS Material Table 可以显示一个布尔值吗答案

【问题标题】：Can ReactJS Material Table display a booleanReactJS Material Table 可以显示一个布尔值吗
【发布时间】：2021-01-09 22:44:55
【问题描述】：

我有一个材料表，当前显示名称和id 的data。我也试图在表中显示mode，但它是一个布尔值而不是字符串和整数。它拒绝在 Mui-Table 中显示这是我唯一能想到的问题。我已经测试过，target_path 也可以用它代替mode。

如果有任何帮助，我将不胜感激

export default function MuiTable(props)
  data=props.data
  return (
    <div>
      <MaterialTable
        icons={tableIcons}
        title="Title"
        columns={[
          { title: 'ID', field: 'id' },
          { title: 'Name', field: 'name' },
          { title: 'Mode', field: 'mode'},
        ]}
        data={data}
        actions={[
          {
            icon: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
            onClick: handleEdit
          },
          {
            icon: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
            onClick: handleDelete
          },
          {
            icon: forwardRef((props, ref) => <NoteAddIcon {...props} ref={ref} color='primary'/>),
            isFreeAction: true,
            onClick: handleRoute,
          }
        ]}
      />
    </div>
  );

我相信“id”、“name”和“mode”是从data中提取出来的。

5: Object { id: 10, name: "Test", target_path: "/path/to/targets", … }

和扩展

id: 10
mode: true
name: "Test"
tableData: Object { id: 5 }
target_path: "/path/to/targets"

【问题讨论】：

标签： reactjs material-ui material-table

【解决方案1】：

Material-table 允许您覆盖任何列的渲染。例如：

<MaterialTable
    // other props
    columns={[
      {
        field: 'url',
        title: 'Avatar',
        render: rowData => (rowData.mode ? "True" : "False"),
      }
    ]}
/>

【讨论】：

【解决方案2】：

您可以检查条件并显示字符串值“真”为真，否则为假。

像这样..

{mode? 'True' : 'false' }

【讨论】：