在React JSX中显示HTML标记 [英] Display html markup in react jsx

问题描述

想直接在我的模板中显示html标记.

Wanted to display straight up html markup into my template.

这是我正在编写要显示的html代码的文件.我想显示所有的html元素.

Here is the file where I am writing html code that I want to display. I want to display all the html elements.

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荧光笔显示代码.

I am importing that html file to be displayed in my component. I will be using an html highlighter to display the code.

每当我引用 {html} 时，它都不会显示所有html元素.只是显示为

Whenever I reference {html}, it doesnt show all the html elements. It just shows as

1
2
3

推荐答案

您需要进行一些更改.首先将 html 更改为字符串，即

you need to make few changes. first change html to a string i.e

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 包装在呈现方法中，即

And use pre and code elements to wrap html in render method i.e

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

这篇关于在React JSX中显示HTML标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！