Javascript ReactJS JSX toString（）

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

目前，我正在为参考实现添加组件作为字符串，为运行场景添加组件作为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>
    );
  }
});

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" />

); } }); 问题：是否有一种方法可以在不需要复制代码的情况下获取给定React组件的字符串表示形式

我期待着这样的事情：

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>
    );
  }
});

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" />

); } });

---

给定代码的输出是

object[object]

由于我没有找到任何解决问题的方法，因此我最终创建了一个npm存储库来完成此任务

用法：

从“React”导入React；
从“jsx到字符串”导入jsxToString；
让Basic=React.createClass({
render（）{
返回(
);
}
}); //这是你的反应组件
log（jsxToString（））//产出：

您可以执行某种ajax调用并以文本/普通格式检索脚本文件吗？然而，如果你正在传输你的JSX，它看起来不再像JSX了……是的，它的想法是成为用户可以轻松复制和粘贴到现有应用程序中的精确表示