在本地与 React 组件交互并渲染答案

【问题标题】：Interacting with and rendering a react component locally在本地与 React 组件交互并渲染
【发布时间】：2017-02-28 04:07:03
【问题描述】：

我有一些渲染 svg 元素的组件。我想得到一堆与生成的 svg 元素相对应的静态图像文件，具有各种属性设置。例如类似...

for (let i=0; i < 100; i++) {
  let foo = <Foo bar={i} />;
  foo.render(); // ???
  fs.writeFile(`foo_${i}.svg`, foo.outerHTML);
}

我可以创建这样的脚本并尝试使用 node 运行它，但我使用create-react-app 创建了我的项目，它使用了 node 不支持的一堆功能（如 es6 导入）。

是否有一些其他的 js 引擎可以用来在本地运行此代码，或者有什么简单的方法可以连接到 create-react-app 使用的转译设置？

有一些与pre-rendering static HTML 相关的文档，但用例完全不同。出于性能原因，我不会尝试预渲染我的网站，我只是尝试渲染一个特定的组件，该组件由一些特定的道具构成。

【问题讨论】：

【解决方案1】：

您可以将 Webpack 与 Babel 一起使用，它将 ES6 转换为 ES5。另外，webpack v2 原生支持 ES6 Import 语句。

在此构建之后，您的节点服务器可以轻松地为生成的捆绑文件提供服务。

【讨论】：