![](/img/trans.png)
[英]Using Markdown-to-JSX package to convert markup to HTML inside a React component's render function
[英]Display html markup in react jsx
想在我的模板中直接显示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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.