Блог

Мой серверный сервис (elasticsearch percolator) аннотирует текст html-тегами, чтобы выделить совпадения.

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

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

ссылка на fiddle

 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'))
  

Поскольку похоже, что в 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

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