Добавить атрибут в дочерний элемент динамического HTML

Question

Я получаю HTML от API сервера, и в этом HTML я хочу добавить target="_blank" к привязке, входящей в div.Я хочу сделать это на фронте из-за некоторых ограничений, поэтому, пожалуйста, дайте мне знать, как это сделать.

Я попробовал следующий подход, но мне не понравился, так как это SPA, и он можетесть другие элементы с этим именем класса.

1. componentDidMount() { document.getElementsByClassName('download_div')[0] .getElementsByTagName('a')[0] .setAttribute('target', '_blank') }

2. Я также могу использовать 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>

  )
}

В качестве альтернативы, болеекомплексный подход заключается в разборе и преобразовании строки HTML с использованием response-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
  }
}