相关疑难解决方法(0)

我正在写一个基于React的文档网站.我想展示使用我的框架中给定组件所必需的代码.同时我想展示实际的组件运行,就像一个并排的视图.

目前,我正在将组件添加为参考实现的String,并将组件添加为运行场景的JSX.像这样的东西:

var ButtonDoc = React.createClass({
  render: function () {
    let buttonComponent = (
      <Button label="Add" />
    );

    let buttonCode = `<Button label="Add" />`;

    return (
      <div>
        {buttonComponent}
        <pre><code>{buttonCode}</code></pre>
      </div>
    );
  }
});

问题:有没有办法可以获得给定React组件的字符串表示而无需复制代码？

我期待这样的事情:

var ButtonDoc = React.createClass({
  render: function () {
    let buttonComponent = (
      <Button label="Add" />
    );

    let buttonCode = `${buttonComponent}`;

    return (
      <div>
        {buttonComponent}
        <pre><code>{buttonCode}</code></pre>
      </div>
    );
  }
});

给定代码的输出是object [object].