将图标添加到材质表“查找”（material-ui React）

Question

我将 material-ui 用于我的项目，将 material-table 用于数据表。 我想知道，如何在 column -> lookup 中使用自定义渲染（例如添加图标）。 例如来自材料表文档：

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 方法的代码