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

Question

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

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

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

像这样的东西：

Answer 1

根据他们的 renderLookUpFiled 方法代码， React.Element作为查找 object 的值应该可以工作。 他们正在渲染{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 方法的代码