想直接在我的模板中显示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
答案 0 :(得分: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
包装在渲染方法中,即
<pre><code>{html}</code></pre>