添加图标到 material-table "lookup" (material-ui React)

Question

我对我的项目使用 material-ui，对数据 table 使用 material-table。我想知道如何在 列 -> 查找 中使用自定义渲染（例如添加图标）。例如来自 material-table 文档：

columns={[
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}

这里是简单的键值对字符串。我想为每个值添加一个图标

像这样：

Answer 1

根据他们的 renderLookUpFiled 方法代码，React.Element 作为查找对象的值应该有效。他们正在渲染 {this.props.columnDef.lookup[key]} 这意味着如果我们通过 React.Element，它也会渲染它，可能会有一些道具警告但它应该可以工作

columns={[
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: <div><img src="/your/image"/> İstanbul</div>, 63: <div><icon/> Şanlıurfa</div> },
        },
      ]}

Material-table 中的 renderLookUpFiled 方法代码

添加图标到 material-table "lookup" (material-ui React)

Add Icon to material-table "lookup" (material-ui React)

reactjs

material-ui

material-table