Можно ли отображать HTML-форматированный текст в таблице antd?

Question

Мой бэкэнд-сервис (asticsearch percolator) аннотирует текст HTML-тегами для выделения совпадений.

Я не могу найти способ отобразить такие html-данные в таблице antd.

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

ссылка на скрипку

const { Table } = antd

class TableColor extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
        data: []
    }
  }

  componentDidMount() {
    this.setState({
        data: [
        {id:1, name: 'Lazy < bclass="myBackgroundColor">fox</b>', match: 'fox'},
        {id:2, name: '<b class="myBackgroundColor">Dog</b> runs', match: 'Dog'},
        {id:3, name: 'I saw <b class="myBackgroundColor">duck</b>', match: 'duck'}
      ]
    })
  }

  render () {
   const columns = [{
      title: 'ID',
      dataIndex: 'id',
    }, {
      title: 'Name',
      dataIndex: 'name',
    }, {
      title: 'Match',
      dataIndex: 'match',
    }]

    return (
        <div style={{padding: '20px'}}>
        <Table
          columns={columns}
          dataSource={this.state.data}
        />
        </div>
    )
  }
}

ReactDOM.render(<TableColor />, document.querySelector('#app'))

Answer 1

Так как в столбце name уже есть выделенный html, вы можете просто добавить свойство render в определение столбца name, которое использует dangerouslySetInnerHtml для визуализации необработанного html.

... что-то вроде:

render: function(html) { return <div dangerouslySetInnerHtml({__html: html}) />

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml https://ant.design/components/table/#Column

Если вы хотите использовать ответные слова, вы можете сделать то же самоевещь со свойством render, но используйте второй аргумент, переданный этой функции, чтобы получить свойство .match записи и использовать его в качестве выделенного слова.