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

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

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

componentDidMount() {

document.getElementsByClassName('download_div')[0]

.getElementsByTagName('a')[0]

.setAttribute('target', '_blank')

}

我也可以使用ReactDOM.findDOMNode(this)。但是访问DOM节点并进行操作是违反React风格的。所以我没有去做。

答案

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

return (

{this.state.apiHtml &&

)

}

或者，更复杂的方法是使用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

}

}