Блог

Главная - Вопросы по программированию - Отображение html-разметки в react jsx

Отображение html-разметки в react jsx

#javascript #html #reactjs #react-redux #jsx

#javascript #HTML #reactjs #react-redux #jsx

Вопрос:

Хотел отобразить прямую html-разметку в моем шаблоне.

Вот файл, в котором я пишу HTML-код, который я хочу отобразить. Я хочу отобразить все html-элементы. 

 import React from 'react';

const html = (
  <div>
      <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
      </ul>
  </div>
);

export default html

файл компонента

 import React, { Component } from 'react';
import html from './code/htmlCodeSnippet';

...
  render() {
    return (
      <div>
        {html}
      </div>
    )
  }
}

Я импортирую этот HTML-файл для отображения в моем компоненте. Я буду использовать HTML-маркер для отображения кода.

Всякий раз, когда я ссылаюсь {html} , отображаются не все html-элементы. Это просто отображается как

 1
2
3

Комментарии:

1. Почему вы уверены, что он не отображает тег div?

2. @lakerskill Что ты имеешь в виду? Потому что, когда я смотрю на страницу, ни один из элементов не отображается.

Ответ №1:

вам нужно внести несколько изменений. сначала измените html на строку, т.е 

 const html = `
   <div>
      <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
      </ul>
      <p>hello</p>
  </div>`;

И использовать элементы pre и code для переноса html в метод рендеринга, т.е

<pre><code>{html}</code></pre>