创建通用的React组件

Question

我们正在尝试使用React为我们的设计人员和开发人员创建一个通用的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} />

（并且可能指定一个默认样式以匹配您在网络上可以找到的内容）。

当您const H1 = require('./h1')时，skpm将pick up h1.sketch.js automatically。然后，您必须修改您的webpack（或您正在使用的任何捆绑程序）配置以优先获取h1.web.js。