如何将原始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>

  <div>hello <b>there {2+xyz}</b></div>

  <span>span content {() => "abc"}</span>

</div>;

  

function render(jsx, indent = '') {

  let ret = '';

  ret += `${indent}<${jsx[0]}>`;

  for (let l = 2; l < jsx.length; l += 1) {

    const v = jsx[l];

    if (Array.isArray(v)) ret += '\r\n' + render(v, indent + '  ')

    else if (typeof v === 'function') ret += `{${v}}`;

    else { ret += v;  }

  }

  ret += `${indent}</${jsx[0]}>\r\n`;

  return ret;

}

console.log(render(jsx));