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

Question

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

<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，并能够将原始 children 捕获为字符串，并将其用作代码示例。

我试过了 this solution (有一些调整)，但它没有给我原始/原始的 JSX，它包含额外的 Prop ，如果我给导入起了别名，它会使用别名的原始名称。

示例

原始代码段 (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

感谢所有的输入。我意识到这是一个不同类型的问题，没有直接的解决方案。最后，这就是我所做的......

更新CodeSample组件

组件在挂载期间获取原始样本。

应用程序/代码示例.tsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Prism } from 'react-syntax-highlighter';
import { atomDark as style } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { getSampleTextRequest } from './duck/actions';
import { sampleTextSelector } from './duck/selectors';
import { AppState } from './duck/state';

export class CodeSample extends Component<Props> {
  componentDidMount() {
    this.props.getSampleText(this.props.samplePath);
  }

  render() {
    const { sampleText } = this.props;

    if (!sampleText) {
      return <em>Loading sample...</em>;
    } else {
      const { children } = this.props;

      if (children) {
        return (
          <div className="row">
            <div className="col col-xs-12 col-md-6">{this.renderCodeSample()}</div>

            <div className="col col-xs-12 col-md-6 mt-2">
              <div className="card">
                <div className="card-body">{children}</div>
              </div>
            </div>
          </div>
        );
      } else {
        return this.renderCodeSample();
      }
    }
  }

  renderCodeSample() {
    const { sampleText } = this.props;
    const language = this.getLanguage();

    return (
      <Prism {...{ language, style }} showLineNumbers={false}>
        {sampleText}
      </Prism>
    );
  }

  getLanguage() {
    const { language, samplePath: path } = this.props;

    return language || /\.(.+?)$/.exec(path)[1];
  }
}

type InjectedProps = {
  sampleText: string;
};

type InjectedActions = {
  getSampleText: typeof getSampleTextRequest;
};

type MyProps = {
  samplePath: string;
  language?: string;
};

type Props = InjectedProps & InjectedActions & MyProps;

const mapStateToProps = (state: AppState, props: MyProps) => ({
  sampleText: sampleTextSelector(state, props.samplePath),
});

const mapDispatchToProps = {
  getSampleText: getSampleTextRequest,
};

export default connect<InjectedProps, InjectedActions, MyProps, AppState>(mapStateToProps, mapDispatchToProps)(CodeSample);

为每个代码示例创建一个实际组件

当它被获取时，我预处理原始代码并忽略任何不以空格开头的行。这只给我导出函数中的示例。

插件/插件按钮.tsx

import React from 'react';
import { FontAwesomeIcon as FA } from '@fortawesome/react-fontawesome';
import { faSearch } from '@fortawesome/free-solid-svg-icons';

export default () => (
  <div className="input-group">
    <input type="text" className="form-control" />
    <div className="input-group-append">
      <button className="btn btn-default">
        <FA icon={faSearch} />
      </button>
    </div>
  </div>
);

在CodeSample

容器中直接导入并渲染该组件

插件/index.ts

对于每个示例，都以“正常方式”以及使用 file-loader 导入组件，这为我提供了组件源的相对路径。我为 CodeSample 实例提供了原始样本的相对路径，然后将实际组件渲染为它的子组件。

import React from 'react';
import CodeSample from '../../app/CodeSample';
import AddonButton from './addon-button';
import AddonButtonSample from '!!file-loader!./addon-button.tsx';

export default () => (
  <div>
    <a id="addon" />
    <h2>Addons</h2>
    <p>An addon is used to attach an icon, button, etc. to an input.</p>

    ...

    <h3>Buttons</h3>
    <CodeSample samplePath={AddonButtonSample}>
      <AddonButton />
    </CodeSample>
  </div>
);

这是最终结果