在react上导入不同文件上的html字符串。使用prismjs显示代码突出显示
在react上导入不同文件上的html字符串。使用prismjs显示代码突出显示
提问于 2019-03-27 05:37:02
使用Prismjs在设计系统中显示代码段。
我想在一个独立的文件中分离html代码示例，并将其导入到我的组件中。
代码示例组件：
CodeSampleContainer.jsx
import React, { Component } from 'react';
import Prism from "prismjs";
import './CodeSample.scss';
import '../Shared/prism.css';
// Import separate html file
import { html } './htmlSnippet.jsx';
class CodeSample extends Component {
hasHtmlBlob() {
return (
<pre>
<code className="language-html">
{html} // Any html displayed here will be highlighted by prism
</code>
</pre>
)
}
}
render() {
return (
<div className="CodeSample">
{this.hasHtmlBlob()}
</div>
)
}
}我要导出的HTML：
htmlSnippet.jsx
const html = `
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>`
return html;回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-27 07:58:40
你的代码中有两个问题：
JSX语法
你应该在"react way“上实现，而不是将模板声明为字符串
const html = (
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
);缺少导出
如果你想从htmlSnippet.jsx中导出你的模板，你应该使用export，而不是return。
export { html };页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55366582
复制相关文章
相似问题