是否可以在 antd 表中显示 html 格式的文本？

Question

我的后端服务（elasticsearch percolator）使用 html 标签注释文本以突出显示匹配项。

我找不到在 antd Table 中显示此类 html 数据的方法。

我试过 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向用于呈现原始 html的name列定义添加一个属性dangerouslySetInnerHtml。

...就像是：

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记录的属性并将其用作突出显示的单词。