Как передать переменную с html кодом в компонент React

Рейтинг: 0Ответов: 1Опубликовано: 30.05.2023

коммьюнити! Происходит get запрос, который тянет с сервера html код. Как я могу вытащить его и вставить в свой React компонент?

const CamundaNorMethod = async () => {
        console.log(anyData)
        const response = await axios.get(
            url + `/camunda/form/${anyData.id}`
        )
        console.log(response.data)
        return response.data
    }

Внутри response.data лежит html. Этот запрос срабатывает при нажатии на кнопку, далее должен получить html код, вставить в компонент и отрисовать динамически. Возможно ли так сделать?

javascript reactjs
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Как я могу вытащить его и вставить в свой React компонент?

Например вот так...

const txt = `<h1>Заголовок<\/h1>
<ul>
  <li>Первый<\/li>
  <li>Второй<\/li>
<\/ul>
`
//
function App() {
  const [html, setHtml] = React.useState(null)
  React.useEffect(_ => {
    // тут типа запрос и получение html ввиде строки
    setTimeout(_ => setHtml(txt), 3000)
  })
  return <div>
    {!html && <p>Сейчас тут появится новый html...</p>}
    <div dangerouslySetInnerHTML={{ __html: html }}></div>
  </div>
}
const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>