在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元素。它只是显示为123

Answer 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元素包装htmlrender方法，即

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