Как отобразить HTML, полученный в JSON, используя React
Прежде всего, прекратите использовать непонятные для понимания имена классов, такие как A, B, C. Используйте животных, млекопитающих, жирафов или продуктов питания, фруктов, апельсинов или что-то там, где отношения понятны.
Тогда возникает вопрос: «Почему я не могу назначить список жирафов переменной типа животного, так как я могу назначить жирафа переменной типа животного?»
Ответ: предположим ты мог. Что может тогда пойти не так?
Ну, вы можете добавить Тигра в список животных. Предположим, мы разрешаем вам помещать список жирафов в переменную, содержащую список животных. Затем вы пытаетесь добавить тигра в этот список. Что происходит? Вы хотите, чтобы список жирафов содержал тигра? Вы хотите сбой? или вы хотите, чтобы компилятор защитил вас от сбоя, сделав это недопустимым в первую очередь?
Мы выбираем последний.
Этот вид преобразования называется «ковариантным «преобразование. В C # 4 мы разрешим вам делать ковариантные преобразования на интерфейсах и делегатах , когда известно, что преобразование всегда безопасно . Подробности см. В статьях моего блога о ковариации и контравариантности. (В понедельник и в четверг на этой неделе появится новая тема по этому вопросу.)
3 ответа
Вам нужно проанализировать HTML.
Вы можете сделать это через dangerouslySetInnetHTML, но безопаснее сначала дезинфицировать его, используя что-то вроде html-react-parser.
import Parser from 'html-react-parser';
Внутри вы оказываете функцию:
<div>{Parser(obj.content)}</div>
Через dangerouslySetInnetHTML .
const htmlString = '<p>My html</p>';
const innerHtmlObject = {
__html: htmlString,
};
<div dangerouslySetInnerHTML={innerHtmlObject} />
Примечание. Это плохая практика, которая может привести к уязвимости безопасности!
Вы можете попробовать это
<div
dangerouslySetInnerHTML={{
__html: this.state.obj.content
}}
/>