创建通用的 React 组件
Creating universal React components
我们正在尝试使用 React 为我们的设计人员和开发人员创建一个通用的 UI 组件库。换句话说 - 我们想将我们的组件库呈现给 react-dom 和 react-sketchapp.
我们很乐意指定一次结构、一次样式和一次行为。
我们可以通过 react-primitives 或 styled-components/primitives 等项目（至少某种程度上）达到目标，但这种方法基本上阻止我们在 HTML 中使用任何语义。当您需要处理的只是 Text 时，您无法真正指定该文本是 <p> 还是 <h1>.
人们以前是如何处理这种共享代码的？我们如何才能将 HTML（通过 JSX）渲染到 Sketch？
您可以通过针对不同平台创建多个文件来创建自己的基元。
例如，如果您想为 h1 创建一个基元，您将创建一个名为 h1.web.js
的文件
const H1 = (props) => <h1 {...props} />
和一个名为 h1.sketch.js
的文件
const H1 = (props) => <Text {...props} />
（并可能指定一个默认样式以匹配您在 Web 上可以找到的样式）。
当你const H1 = require('./h1')时，skpm会pick up h1.sketch.js automatically。然后，您必须修改您的 webpack（或您正在使用的任何捆绑器）配置以优先选择 h1.web.js。
我们正在尝试使用 React 为我们的设计人员和开发人员创建一个通用的 UI 组件库。换句话说 - 我们想将我们的组件库呈现给 react-dom 和 react-sketchapp.
我们很乐意指定一次结构、一次样式和一次行为。
我们可以通过 react-primitives 或 styled-components/primitives 等项目（至少某种程度上）达到目标，但这种方法基本上阻止我们在 HTML 中使用任何语义。当您需要处理的只是 Text 时，您无法真正指定该文本是 <p> 还是 <h1>.
人们以前是如何处理这种共享代码的？我们如何才能将 HTML（通过 JSX）渲染到 Sketch？
您可以通过针对不同平台创建多个文件来创建自己的基元。
例如，如果您想为 h1 创建一个基元，您将创建一个名为 h1.web.js
const H1 = (props) => <h1 {...props} />
和一个名为 h1.sketch.js
const H1 = (props) => <Text {...props} />
（并可能指定一个默认样式以匹配您在 Web 上可以找到的样式）。
当你const H1 = require('./h1')时，skpm会pick up h1.sketch.js automatically。然后，您必须修改您的 webpack（或您正在使用的任何捆绑器）配置以优先选择 h1.web.js。