Question

我从服务器api获取HTML并且在HTML中我想将target="_blank"添加到div内的锚点。由于一些限制，我想在前端做到这一点，所以请让我知道如何做到这一点。

我尝试了以下方法，但我不喜欢它，因为它是SPA，它可以有其他元素与此类名称。

componentDidMount() { document.getElementsByClassName('download_div')[0] .getElementsByTagName('a')[0] .setAttribute('target', '_blank') }
我也可以使用ReactDOM.findDOMNode(this)。但是访问DOM节点并进行操作是违反React风格的。所以我没有去做。

Answer 1

您可以使用正则表达式查找需要其他属性的元素，并使用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

解析和转换HTML字符串

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
  }
}

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

1 个答案: