如何将原始JSX标记传递给组件以作为代码显示在页面中？

Question

对于我正在创建的自记录样式指南，我有一个CodeSampleaccepts组件children。我需要将的确切字符串呈现children为字符串。

<CodeSample language="tsx">

  <div className="some-thing">

    <Icon name="some-icon" />

  </div>

</CodeSample>

当然，在我的组件中，我可以轻松地渲染子代，但是我还需要显示子代的原始/原始JSX。我已经尝试过了，ReactDOMServer.renderToString(...)但这包括许多不同的属性，并且还重新格式化了原始的JSX。我也尝试过该jsx-to-string软件包，但这也没有给我确切的/原始的/原始的JSX。

另外，我可以向传送一个字符串CodeSample并将其用作原始示例文本，然后将该字符串呈现为实际的示例组件，就可以了。我尝试使用来完成此操作ReactDomServer.renderToString，renderToStaticMarkup但是在两种情况下，输出的结果都不都是原始的JSX。

明确地说，首选方法是使用上面显示的HTML，并且能够将raw捕获children为字符串并将其用作代码示例。

我已经尝试了此解决方案（进行了一些调整），但是它没有给我原始的/原始的JSX，它包含其他道具，如果我为导入添加了别名，它会使用别名的原始名称。

例子

原始代码段（JSX）

<div className="input-group">

  <div className="input-group-prepend">

    <span className="input-group-text">

      <FA icon={faSearch} />

    </span>

  </div>

  <input type="text" className="form-control"/>

</div>

预期结果（文本）

（与原件完全相同。）

实际结果

<div className="input-group">

   <div className="input-group-prepend">

     <span className="input-group-text">

       <FontAwesomeIcon icon={{prefix:fas,iconName:search,icon:[512,512,[],f002,M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z]}} border="false" className="" mask="null" fixedWidth="false" inverse="false" flip="null" listItem="false" pull="null" pulse="false" rotation="null" size="null" spin="false" symbol="false" title="" transform="null" />

     </span>

   </div><input type="text" className="form-control" />

 </div>

Answer 1

JSX没有存储在您的Javascript中，而是存储为一组React.createElement命令。因此，一个想法是拦截React.createElement并获取值。然后逆向生成HTML。下面是一个示例，它还不完整，但是您可以对其进行增强等。当然，这并不是完美的，因为某些信息将会丢失。{2+xyz}，已转换为9，因为在编译时已经对其进行了评估。const ret = [];const React = {createElement: (...args) => { return args}};const xyz = 7;const jsx = <div>&nbsp; <div>hello <b>there {2+xyz}</b></div>&nbsp; <span>span content {() => "abc"}</span></div>;&nbsp;&nbsp;function render(jsx, indent = '') {&nbsp; let ret = '';&nbsp; ret += `${indent}<${jsx[0]}>`;&nbsp; for (let l = 2; l < jsx.length; l += 1) {&nbsp; &nbsp; const v = jsx[l];&nbsp; &nbsp; if (Array.isArray(v)) ret += '\r\n' + render(v, indent + '&nbsp; ')&nbsp; &nbsp; else if (typeof v === 'function') ret += `{${v}}`;&nbsp; &nbsp; else { ret += v;&nbsp; }&nbsp; }&nbsp; ret += `${indent}</${jsx[0]}>\r\n`;&nbsp; return ret;}console.log(render(jsx));