在动态HTML的子元素中添加属性

可以使用正则表达式查找需要附加属性的元素,然后使用 dangerouslySetInnerHTML 输出结果。

例如:

componentDidMount() {
  const apiHtml = fetch('/my_api').then((apiHtml) => { 
    // fetch the raw HTML you want
    this.setState({apiHtml})
  })
}

render() {
  const rawHtml = this.state.apiHtml.replace('<a href', "<a target='_blank' href")
  return (
    <div>
      {this.state.apiHtml && <div dangerouslySetInnerHTML={{__html: rawHtml}} />}
    </div>

  )
}

或者,更复杂的方法是使用 react-html-parser

import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';

function transform(node) {
  if (node.type === 'a' &&) {
    return convertNodeToElement(node, index, transform); // Alter the object here to suit your needs
  }
}