Отобразить HTML-разметку в реагировать JSX - PullRequest
Новая
       18

Отобразить HTML-разметку в реагировать JSX

1 голос
/ 27 марта 2019

Требуется отобразить 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 Ответ

3 голосов
/ 27 марта 2019

вам нужно сделать несколько изменений. сначала измените 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}

...