將圖標添加到材料表“查找”（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 方法的代碼