¿Cómo reacciona una cadena que contiene elementos de etiqueta html?

Cómo representar una cadena que contiene elementos de etiqueta html

Recientemente, existe una demanda de búsqueda y reemplazo.Los usuarios pueden ingresar información de palabras clave para que coincida con los datos correspondientes, y luego marcar y mostrar sus palabras clave, como se muestra en la siguiente figura:

---

La idea para cumplir con los requisitos anteriores es que el front-end juzgue el contenido de recuperación y establezca un estilo de color de fondo para las palabras clave correspondientes en el contenido. El código es el siguiente:

    if (content?.includes(serachV)) {
    
    
      content = content.replaceAll(serachV, `<span style="background-color: gold;">${
      
      serachV}</span>`);
      return content
    }

---

Pero después de esta configuración, no logré el efecto que quería. La pantalla frontal no se volvió amarilla y no surtió efecto.

Después de consultar la información, encontré que en reaccionar, por razones de seguridad (ataque XSS), todas las expresiones insertadas en React.js se escaparán automáticamente, lo que es equivalente a la función de texto (…) en jQuery, cualquier formato HTML será escapado.

Por lo tanto, el contenido después de la operación a través del editor de texto enriquecido conservará el estilo de etiqueta original y no se podrá mostrar correctamente, como se muestra en el cuadro rojo de la siguiente figura:

---

Entonces podemos usar dangerouslySetInnerHTMLesta API para configurarla como HTML interno para lograr el efecto anterior, el código es el siguiente:

    if (content?.includes(serachV)) {
    
    
      content = content.replaceAll(serachV, `<span style="background-color: gold;">${
      
      serachV}</span>`);
      return <span dangerouslySetInnerHTML={
    
    {
    
     __html: content }} />;
    }

El código completo es el siguiente:

export const quickReplaceColumns = (serachV: string) => {
    
    
  const renderNode = (content: string) => {
    
    
    if (content?.includes(serachV)) {
    
    
      content = content.replaceAll(serachV, `<span style="background-color: gold;">${
      
      serachV}</span>`);
      return <span dangerouslySetInnerHTML={
    
    {
    
     __html: content }} />;
    }
    return content || '--';
  };
  return [
    {
    
    
      title: '用例名称',
      dataIndex: 'name',
      width: '30%',
      render: (name: string) => renderNode(name),
    },
    {
    
    
      title: '用例内容',
      dataIndex: 'content',
      width: '50%',
      render: (content: string) => renderNode(content),
    },
    {
    
    
      title: '所属模块',
      dataIndex: 'module_name',
      width: '10%',
    },
  ];
};

El efecto es el siguiente:

---

---

Qué es peligrosamente SetInnerHTML

peligrosamenteSetInnerHTMl es un atributo de la etiqueta React, y la traducción de peligrosamenteSetInnerHTML es: HTML interno peligrosamente establecido.

¿Por qué es peligroso? Debido a que la entrada del usuario es incontrolable, si dicha operación se desarrolla para la entrada del usuario, puede provocar ataques de secuencias de comandos entre sitios (XSS) u otros ataques de páginas web, y pueden aparecer algunos errores inesperados.

Sin embargo, nuestro uso aquí controla la entrada y no está abierto a la entrada del usuario, por lo que la situación anterior no ocurrirá, por lo que puede usarlo con confianza.

Precauciones de uso

1. La sintaxis de DangerlySetInnerHTML: la primera capa { } representa la sintaxis JSX, y la segunda capa { } es un par clave-valor de __html:cadena.
2. <img className="detail_img" src=${v[0]} />Al principio , todos los resultados renderizados sin acentos graves eran [objeto Objeto]. Me tomó mucho tiempo darme cuenta__html:string
3. El código html envuelto en acentos graves ya no es sintaxis JSX, por lo que clasName debe cambiarse a class;