如何在代码标签内打印react-code？

Question

我想在网页上显示我的反应代码，以便访问者可以阅读它。如何将反应代码转换为字符串并使用缩进打印？

反应

   const reactcode= (
     <div>
       <div>
        <div>hello world</div>
       </div>
    </div>);

Answer 1

方法1：分隔换行符描述的字符串：

const reactcode = '<div>' +
'\n  <div>' + 
'\n    <div>hello world</div>' + 
'\n  </div>' + 
'\n</div>)';

方法2：ES2015 template literals更简单

const reactcode = `
<div>
   <div>
     <div>hello world</div>
   </div>
</div>`;

请注意字符串开头和结尾的反引号（`）。

方法2的工作原理是因为模板文字可以跨越多行。

修改

我刚刚意识到你正在寻找的是一种将实际的React代码转换为字符串的方法，而不仅仅是打印字符串。看起来npm jsx-to-string模块可以帮助解决这个问题。