MaterialTable: отображать HTML-тег в свойстве поля

Question

Я использую библиотеку MaterialTable для рендеринга таблицы для моего реактивного приложения.

Источник: Material Table Github

После выполнения запроса API сервервозвращает объект с тегом HTML как этот:

  {
    "name": "Test",
    "link": "https://google.com",
    "httpLink": "<a href='https://google.com'>google</a>"
  }

На клиенте у меня есть компонент, отображающий эти данные, и я хотел бы отобразить визуализированный тег HTML или обернуть ссылку в тег HTMLи отображать только слово между ними.

            columns={[
              { title: 'Name', field: 'name' },
              { title: 'LinkString', field: 'link'},
              { title: 'Link', field: 'httpLink'},         
            ]}

Я попытался обернуть поле ссылки тегом, но это не работает, и я ничего не могу отобразить на странице.

HttpLink будет отображать строку вместо рендеринга тега и отображения слова google.

Требуемый вывод:

Имя |Ссылка

Тест |Google

Вывод:

Имя |Ссылка

Тест |<a href='https://google.com'>google</a>

Я посмотрел документы, но ничего не смог найти по этому вопросу.

Материал Таблицы документов

Может кто-нибудь помочь, пожалуйстаменя

Answer 1

Вы можете использовать пользовательскую функцию рендеринга

columns={[
              { title: 'Name', field: 'name' },
              { title: 'LinkString', field: 'link'},
              { title: 'Link', field: 'httpLink', render: rowData => <a href={rowData.link}>{rowData.name}</a>},         
            ]}

Answer 2

Чтобы преобразовать тег String в Real DOM в React, попробуйте это

columns={[
          { title: 'Name', field: 'name' },
          { title: 'LinkString', field: 'link'},
          { title: 'Link', field:  <span dangerouslySetInnerHTML={{__html: 'httpLink'}} />},         
        ]}