Question

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

我找不到在antd表中显示此类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属性添加到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属性并将其用作突出显示的属性字。

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

1 个答案: