Есть ли способ визуализировать HTML из строки в React без использования dangerouslySetInnerHTML или пакета React HTML Parser?
Я хочу иметь возможность отправлять элемент HTML в виде строки в реквизите моего компонента. Я понимаю, что могу визуализировать это с помощью dangerouslySetInnerHTML(), но я не хочу устанавливать «внутренний» HTML для чего-либо — я просто хочу визуализировать элемент HTML в том виде, в котором он поступает из реквизита.
Например, если я отправлю <a href = "/somepage" data-attr = "somthing">Link here</a>, я просто хочу «напечатать» только этот элемент тега привязки в своем компоненте.
dangerouslySetInnerHTML() могло бы сработать, но мне пришлось бы обернуть отправленный элемент в другой элемент.
Например:
<div dangerouslySetInnerHTML = {{ __html: linkHtml }} />
Будет рендерить:
<div><a href = "/somepage" data-attr = "somthing">Link here</a></div>
Пакет React HTML Parser, кажется, делает то, что я хочу, но я хотел бы знать, есть ли способ сделать это без предварительного использования стороннего пакета.
Кто-нибудь знает, есть ли способ добиться этого?
@Ry- Часть компонента, который я пытаюсь воссоздать в React, имеет раздел, который может быть ссылкой, кнопкой или просто заголовком. Вместо того, чтобы создавать реквизиты, скажем, для имени ссылки, URL-адреса ссылки, любых атрибутов и т. д., я подумал, что разработчику было бы лучше просто создать тег привязки, кнопку, тег p или любой другой HTML-код, который он хочет, который затем можно будет быть передан в качестве реквизита и отображен в моем более крупном компоненте.
Это очень разумно, но разве это «да»?
Да, я так полагаю.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я думаю, вы можете использовать это, если хотите использовать реквизит:
<Mycomponent>
<div><a href = "/somepage" data-attr = "somthing">Link here</a></div>
</Mycomponent>
и в MyComponent используйте:
interface MycomponentPropsType {
children?: React.ReactNode;
}
export const Mycomponent = ({ children }: MycomponentPropsType) => {
return (
<>
{children}
</>
)
}
Другой способ, который, я думаю, вы не хотите его использовать:
let node = `<div><a href = "/somepage" data-attr = "somthing">Link here</a></ div>`
let element = document.getElementById("Mycomponent")
element.insertAdjacentHTML("afterbegin", node)
То есть вас на самом деле не волновало, была ли это строка, просто ее можно было передать в реквизитах?