想要直接在我的模板中显示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>`;
并使用pre
和code
元素包装html
render方法,即
<pre><code>{html}</code></pre>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句