ReactJS JSX toString()

Question

我正在写一个基于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].

Answer 1

由于我没有找到解决我问题的任何内容,我最终创建了一个npm存储库来完成这项任务.

https://github.com/alansouzati/jsx-to-string

用法:

import React from 'react';
import jsxToString from 'jsx-to-string';

let Basic = React.createClass({
  render() {
    return (
      <div />
    );
  }
}); //this is your react component

console.log(jsxToString(<Basic test1="test" />)); //outputs: <Basic test1="test" />