我是 ReactJS 世界的新手,并试图进入它。我正在编写一个样式指南,我需要为此显示一些 HTML 代码作为示例。我为此使用了 ReactPrism,但我无法在我的 PrismCode 组件中获取 HTML 输出,我通过使用显示 JSX 代码而不是 HTML 的 react-to-jsx 找到了解决方法。这是代码:
import React from 'react';
import {PrismCode} from "react-prism";
import reactToJsx from 'react-to-jsx';
class CodePreview extends React.Component {
render (){
return (
<div>
{this.props.children}
<h5>Code example</h5>
<pre>
<PrismCode className="language-javascript">
{reactToJsx(this.props.children)}
</PrismCode>
</pre>
</div>
);
}
}
export default CodePreview;
所以基本上我想将 this.props.children (组件)呈现为 HTML 代码,而不是 PrismCode 中的内容我什至尝试了以下内容,如https://github.com/tomchentw/react-prism所示,但是它不起作用。不知道我做错了什么!
<PrismCode className="language-javascript">
{require("raw-loader!./PrismCode")}
</PrismCode>