Отрисовка пользовательского элемента Reactjs по строке

Question

У меня вопрос при использовании React.js

У меня есть некоторые строки из бэкэнда, и мне нужно ввести их в мою JSX DOM реакции.

Backend дает мне эту строку

      from Backend => 
let testString = '<TestTag />'

Я просто хочу выполнить DangerouslyInnerHTML

      from Frontend =>

const TestTag = styled.div`
width: 100px;
height: 100px;
background-color: yellow;
`

function Example() {

  const html = `
    testString
  `
  return (
    <InnerHTML html={html} />
  )
}

Ожидается отображение желтого поля, но печатается пустой элемент

Что мне делать, чтобы решить эту проблему?

Answer 1

Похоже, вы упускаете синтаксис. Также он не работает в элементе React. Сделайте это внутри

Правильный синтаксис для использования опасно SetInnerHTML:

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