ReactJS JSX toString()

Question

我正在使用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>
    );
  }
});

问题：是否有一种方法可以获取给定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]。

- Alan Souza

---

你能够进行某种类型的ajax调用并将脚本文件作为text/plain检索吗？但是，如果你正在转换你的JSX，它看起来不再像JSX了... - ndugger

是的，这个想法是成为用户可以轻松复制并粘贴到他现有应用程序中的确切表示。 - Alan Souza

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

- Alan Souza

---

还有一个 https://github.com/algolia/react-element-to-jsx-string - tim-phillips

Answer 2

这篇文章可能有点晚了，但如果有人在半个世纪后读到它（React v17，Native 0.68），你也可以在反引号里使用花括号： `${integerToString}`。 这将会把你嵌入的值转换为字符串。

- beardeblanc