在React JSX中显示HTML标记

Question

想要直接将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

Answer 1

您需要进行一些更改。首先更改html为字符串，即const html = `&nbsp; &nbsp;<div>&nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li>1</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li>2</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li>3</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li>4</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li>5</li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; <p>hello</p>&nbsp; </div>`;并使用pre和code元素包装htmlrender方法，即<pre><code>{html}</code></pre>