在反应jsx中显示html标记

Posted 2023-02-21

【中文标题】在反应jsx中显示html标记

【英文标题】：Display html markup in react jsx

【发布时间】：2019-08-18 06:00:54

【问题描述】：

想要在我的模板中直接显示 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

【问题讨论】：

你怎么确定它没有显示 div 标签？

@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>