在React JSX中显示HTML标记

理查德·布斯托斯(Richard Bustos)

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

您需要进行一些更改。首先更改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>`;

并使用precode元素包装htmlrender方法,即

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章