Возврат элементов HTML относится к процессу отправки назад элемента HTML или коллекции элементов в результате выполнения функции, метода или операции в контексте программирования. Обычно это происходит в средах или библиотеках веб-разработки, где управление DOM (объектной моделью документа) имеет решающее значение.
В этом посте вы познакомитесь с процессом рендеринга HTML-элементов непосредственно из ответа JSON на странице.
В React вы можете установить внутренний HTML-код контейнера, используя свойство dangerouslySetInnerHTML. Итак, если вы используете следующую строку JavaScript для установки внутреннего HTML контейнера <div>...
const htmlDiv=document.querySelector('div');
const htmlPart='<p>Welcome to this <strong>page</strong></p>'
htmlDiv.innerHTML=htmlPart;
... вы можете сделать то же самое, передав свойство dangerouslySetInnerHTML в свой контейнер и передав ему объект с ключом __html и значением HTML-код, который вы хотите установить для внутреннего HTML-кода этого контейнера. Вы можете сделать это в React как:
import React from 'react';
const RenderHTML=()=>{
const htmlPart='<p>Welcome to this <strong>page</strong></p>'
return(
<div dangerouslySetInnerHTML={ {__html: htmlPart} } />
)
}
Давайте рассмотрим практическую реализацию на подробном примере.
В этом примере вы создадите фиктивный ответ JSON, который содержит некоторые элементы HTML в виде строки и возвращает их в DOM. Вариант использования, продемонстрированный в этом примере, относится к порталу вакансий, где рекрутер разместил вакансию с отформатированным описанием вакансии. Показывая эту вакансию пользователям, вы должны показать описание вакансии в том же формате, в котором оно было опубликовано.
Вы можете имитировать любой API, сохранив его данные JSON внутри файла JavaScript и экспортировав их как объект. Создайте пустой файл JavaScript под названием data.js со следующим кодом:
export default {
"Job Description": "<h4> Supply Chain Manager @<strong><i>CargoChainzz Pvt Limited </i></strong></h4><br/><p>This job requires at least 3 years of experience</p>"
}
Теперь вы можете импортировать этот объект куда угодно.
Импортируйте объект data внутрь компонента, в котором вы хотите его отобразить.
import data from './data';
Вы можете использовать этот объект данных напрямую или установить необходимое свойство этого объекта для вашего компонента state внутри хука жизненного цикла
Внутри пустого <div> передайте свойство опасноSetInterHTML с объектом ключа __html и значением data["Job Description"], как Свойство Job Description объекта data содержит элементы HTML в виде строки.
<div dangerouslySetInnerHTML={{__html:data["Job Description"]}}></div>
Теперь ваши HTML-элементы из JSON возвращаются из компонента в JSON в DOM.