React напрямую изменить элементы по классу

Question

У меня есть html, который я вставляю на страницу с помощью dangerouslySetInnerHTML. Я знаю, что это не безопасно)

И мне нужно в этом вставленном html получить все ссылки и изменить у них атрибут href

Я пробовал это

componentDidMount() {
  let links = findDOMNode(this).querySelectorAll("a");

  links.forEach(link => {
    let relativeLink = link.getAttribute("href");

    if (relativeLink) {
      link.setAttribute("href", `https://domain.com${relativeLink}`);
    }
  });
}

Этот код получает нужные мне ссылки, но изменение атрибута - не видно.

Как изменить эти ссылки?

Вот весь компонент

import React from "react";
import {
  findDOMNode
} from "react-dom";

export default class DialogItem extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      active: false
    };
  }

  componentDidMount() {
    let links = findDOMNode(this).querySelectorAll("a");
    links.forEach(link => {
      let relativeLink = link.getAttribute("href");
      console.log(link);
      if (relativeLink) {
        link.setAttribute("href", `https://domain.com${relativeLink}`);

      }
    });
  }

  render() {
    return ( <
      div className = {
        `dialog-item ${this.state.active ? "active" : ""}`
      } >
      <
      div className = "dialog-item__preview"
      onClick = {
        () =>
        this.setState(prev => ({
          active: !prev.active
        }))
      } >
      <
      h2 className = "dialog-item__name" > {
        this.props.name
      } < /h2> <
      span className = "arrow-down" / >
      <
      /div>

      <
      div className = "dialog-item__content" >
      <
      ul > {
        this.props.messages.map(message => {
          return ( <
            li key = {
              message.name + Math.random()
            }
            dangerouslySetInnerHTML = {
              {
                __html: message.mess
              }
            }
            />
          );
        })
      } <
      /ul> < /
      div > <
      /div>
    );
  }
}

Answer 1

Проблему, как изменять html напрямую я не решил, но свою проблему разрулил.

Полученный с сервера html в виде строки я превратил в обычный html, изменил нужные мне ссылки, а затем обратно превратил в строку

< div className = "dialog-item__content" >
  <
  ul > {
    this.props.messages.map(message => {
      // create fake div
      let div = document.createElement("div");
      // insert there fetched string html to get HTMLElement
      div.innerHTML = message.mess;

      div.querySelectorAll("a").forEach(link => {
        link.innerHTML = '';
      });

      return ( <
        li key = {
          message.name + Math.random()
        }
        dangerouslySetInnerHTML = {
          {
            __html: div.innerHTML
          }
        }
        />
      );
    })
  } <
  /ul> < /
  div >

БЛОГ НА HUSL

React напрямую изменить элементы по классу

Ответы (1 шт):