ReactJS JSX toString（）

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

由于找不到任何可以解决问题的方法，因此我最终创建了一个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" />

以上是 ReactJS JSX toString（） 的全部内容， 来源链接： utcz.com/qa/397777.html

回到顶部