Início / coding / Perguntas / 78579029
Accepted
MeltingDog
Asked: 2024-06-05 14:06:28 +0800 CST

Existe uma maneira de renderizar HTML a partir de uma string no React sem usar `dangerouslySetInnerHTML` ou o pacote React HTML Parser?

  • 772

Quero poder enviar um elemento HTML como string em um suporte para o meu componente. Entendo que posso renderizar isso, dangerouslySetInnerHTML()mas não quero definir o HTML "interno" de nada - só quero renderizar o elemento HTML conforme ele vem do suporte.

Por exemplo, se eu enviar, <a href="/somepage" data-attr="somthing">Link here</a>quero apenas 'imprimir' apenas aquele elemento da tag âncora no meu componente.

dangerouslySetInnerHTML()poderia funcionar, mas eu teria que agrupar meu elemento enviado em outro elemento.

Por exemplo:

<div dangerouslySetInnerHTML={{ __html: linkHtml }} />

Renderizaria:

<div><a href="/somepage" data-attr="somthing">Link here</a></div>

O pacote React HTML Parser parece fazer o que eu quero, mas gostaria de saber se existe uma maneira de fazer isso sem usar primeiro um pacote de terceiros.

Alguém sabe se existe uma maneira de conseguir isso?

javascript

1 respostas

  1. Best Answer

    Eu acho que você pode usar isso se quiser usar adereços:

    <Mycomponent> 
    <div><a href="/somepage" data-attr="somthing">Link here</a></div>
</Mycomponent>

    e no uso do Mycomponent:

    interface MycomponentPropsType {
    children?: React.ReactNode;
}

export const Mycomponent = ({ children }: MycomponentPropsType) => {
    return (
    <>
        {children}
    </>
    )
}

    Outra forma que acho que você não quer usar é:

    let node = `<div><a href="/somepage" data-attr="somthing">Link here</a></     div>`
let element = document.getElementById("Mycomponent")
element.insertAdjacentHTML("afterbegin", node)
    • 0

relate perguntas