使用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;
发布于 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 };
https://stackoverflow.com/questions/55366582
复制相似问题