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