Возврат элементов HTML из JSON в React

Возврат элементов HTML относится к процессу отправки назад элемента HTML или коллекции элементов в результате выполнения функции, метода или операции в контексте программирования. Обычно это происходит в средах или библиотеках веб-разработки, где управление DOM (объектной моделью документа) имеет решающее значение.

В этом посте вы познакомитесь с процессом рендеринга HTML-элементов непосредственно из ответа JSON на странице.

Использование опоры опасноSetInnerHTML

В 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} } />
    )
}

Давайте рассмотрим практическую реализацию на подробном примере.

Реализация в React

В этом примере вы создадите фиктивный ответ JSON, который содержит некоторые элементы HTML в виде строки и возвращает их в DOM. Вариант использования, продемонстрированный в этом примере, относится к порталу вакансий, где рекрутер разместил вакансию с отформатированным описанием вакансии. Показывая эту вакансию пользователям, вы должны показать описание вакансии в том же формате, в котором оно было опубликовано.

Создание фиктивного JSON

Вы можете имитировать любой 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>"
}

Теперь вы можете импортировать этот объект куда угодно.

Использование опоры опасноSetInnerHTML

Импортируйте объект 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.