對(duì)于我正在創(chuàng)建的自記錄樣式指南，我有一個(gè)CodeSampleaccepts組件children。我需要將的確切字符串呈現(xiàn)children為字符串。<CodeSample language="tsx"> <div className="some-thing"> <Icon name="some-icon" /> </div></CodeSample>當(dāng)然，在我的組件中，我可以輕松地渲染子代，但是我還需要顯示子代的原始/原始JSX。我已經(jīng)嘗試過了，ReactDOMServer.renderToString(...)但這包括許多不同的屬性，并且還重新格式化了原始的JSX。我也嘗試過該jsx-to-string軟件包，但這也沒有給我確切的/原始的/原始的JSX。另外，我可以向傳送一個(gè)字符串CodeSample并將其用作原始示例文本，然后將該字符串呈現(xiàn)為實(shí)際的示例組件，就可以了。我嘗試使用來完成此操作ReactDomServer.renderToString，renderToStaticMarkup但是在兩種情況下，輸出的結(jié)果都不都是原始的JSX。明確地說，首選方法是使用上面顯示的HTML，并且能夠?qū)aw捕獲children為字符串并將其用作代碼示例。我已經(jīng)嘗試了此解決方案（進(jìn)行了一些調(diào)整），但是它沒有給我原始的/原始的JSX，它包含其他道具，如果我為導(dǎo)入添加了別名，它會(huì)使用別名的原始名稱。例子原始代碼段（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>預(yù)期結(jié)果（文本）（與原件完全相同。）實(shí)際結(jié)果<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>
如何將原始JSX標(biāo)記傳遞給組件以作為代碼顯示在頁面中？
ibeautiful
2021-04-28 13:49:05
