创建通用的反应组件

Question

我们正试图为我们的设计人员和开发人员创建一个通用的UI组件库。换句话说，我们希望将组件库同时呈现给react-dom和react-sketchapp。

我们希望只指定一次结构、一次样式和一次行为。

我们可以使用像react-primitives或styled-components/primitives这样的项目(至少在某种程度上)，但是这种方法基本上阻止了我们在HTML中使用任何语义。当您只需要使用Text时，就不能真正指定文本是<p>还是<h1>。

以前人们是如何以这种方式处理代码共享的？我们如何将HTML (通过JSX)呈现给Sketch？

Answer 1

通过创建针对不同平台的多个文件，您可以创建自己的原语。

例如，如果您想为h1创建一个原语，您将创建一个名为h1.web.js的文件

const H1 = (props) => <h1 {...props} />

和一个名为h1.sketch.js的文件

const H1 = (props) => <Text {...props} />

(并且可能指定一个默认样式来匹配您可以在web上找到的内容)。

当你const H1 = require('./h1')的时候，skpm会 automatically。然后，您必须修改webpack (或您正在使用的任何绑定程序)配置，以获得h1.web.js的优先级。