使用 <code> 标签显示 React 组件源代码答案

【问题标题】：Display React component Source code using <code> tag使用 <code> 标签显示 React 组件源代码
【发布时间】：2018-06-17 01:46:57
【问题描述】：

我正在创建一个反应样式指南。我没有使用任何降价。我想显示组件、描述、组件的源代码。如果我将整个源代码保存在一个变量中并显示它们，我可以使用代码标签显示它们。（见下文）

 render() {
   var text = `<h1>Helllooo</h1>`;
    return (
     <div>
       <pre>
         <code>
           {text}
         </code>
       </pre>
     </div>
   );
 }

但是有什么方法可以让我使用 url 获取源代码并在代码标签中显示例如从 components/Button/index.js 获取代码并将其显示在代码标记中？请帮忙！

【问题讨论】：

如果我理解你的问题，那不是。组件是函数，react child不能是函数。
那么如何在我的样式指南中显示任何组件旁边的源代码？有什么想法吗？
您可以尝试将 jsx 转换为字符串库，但如果您想显示该组件的整个代码，这样做似乎太复杂（或不可能）。我更喜欢使用markdown 来记录。

标签： reactjs components

【解决方案1】：

有一些库可以帮助您完成您想做的事情。尝试搜索“jsx to string”。

我个人使用过react-element-to-jsx-string，效果很好。

【讨论】：

【解决方案2】：

您可以尝试将其存储在数组中，而不是 Sting

您可以访问https://jsfiddle.net/rajatdhoot/ara1mdam/1/ 运行代码

class Hello extends React.Component {
 render() {
  var text = [<h2>Hello</h2>]
   return text
  }
 }
 ReactDOM.render(
  <Hello />,
  document.getElementById('container')
 );

HTML代码

<div id="container">
</div>

【讨论】：

【解决方案3】：

您在这里实际上要做的是使用 React 呈现 HTML 标记。您的标记仍然可以是字符串格式，但理想情况下，它们应该通过 props 接收，而不是在组件中硬编码。

React 默认提供dangerouslySetInnerHTML 作为实现此目的的一种方式。但出于安全原因，不建议这样做 - https://reactjs.org/docs/dom-elements.html

正如 Grandas 建议的那样，尝试使用库或插件来做同样的事情。 html-react-parser 是我能想到的另一种选择 - https://github.com/remarkablemark/html-react-parser

【讨论】：