Как создать дочерний элемент из ответа сервера в реагирующем приложении

Я создал приложение для реагирования со многими nested routes.

Один из моих вложенных маршрутов использует бэкэнд API, который возвращает полный HTML content.

И мне нужно отобразить именно этот контент с тем же HTML и стилем в моем пользовательском интерфейсе.

Я могу успешно добиться этого, манипулируя DOM в соответствии с ответом axios, используя методы createElement и appendChild внутри useEffect.

Но вся философия использования реакции заключается в том, чтобы НЕ изменять DOM и позволить реакции работать с ней, просто обновляя состояния или реквизиты.

Мой вопрос: Есть ли более чистый способ использования возвращаемого API HTML в приложении для реагирования?

Вот пример соответствующего кода:

Item.js

...
...
useEffect( ()=>{  
    const fetchAndUpdateItemContent = async () => {
      try {     
        const response = await axios.get(url);
       
        var contentDiv = document.createElement("div");
        contentDiv.innerHTML = response.data.markup;
        document.getElementById(‘itemContent’)
             .appendChild(contentDiv); 
       
      } catch (err) {
          .....
          console.error(err);
          ......
        }
      }
    };
    fetchAndUpdateItemContent(); 
  },[itemId])

  return (
   <div id=‘itemContent'/>
  );
}

Что НЕ сработало

В идеале я должен иметь состояние как itemContent в Item.js и иметь возможность обновлять его на основе ответа сервера, подобного этому. Но когда я делаю что-то вроде ниже, отображается вся HTML-разметка, а не только отображаемый контент.

const [itemContent, setItemContent] = useState(‘Loading ...');

...
    useEffect( ()=>{  
        const fetchAndUpdateItemContent = async () => {
          try {     
            const response = await axios.get(url);
            setItemContent(response.data.markup)  
          } catch (err) {
              .....
              console.error(err);
              ......
            }
          }
        };
        fetchAndUpdateItemContent(); 
      },[itemId])
    
      return (

    <div id=‘itemContent'>
      {itemContent}
     </div>
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
2
0
31
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я считаю, что вы можете использовать опасноSetInnerHTML

Ответ принят как подходящий

На самом деле вы пытаетесь преобразовать строку HTML в JSX. Вы можете назначить его реквизитам компонента реакции с именем опасноSetInnerHTML.

Например:

const Item = () => {
  const yourHtmlStringResponse = '<h1>Heading 1</h1><h2>Heading 2</h2>'
  return <div dangerouslySetInnerHTML={{__html: yourHtmlStringResponse}}></div>
}

Вы можете попробовать это здесь опасноSetInnerHTML-кодыпесочницы

Другие вопросы по теме