使用 react-sketchapp 渲染默认 HTML 和 CSS 到 Sketch

Question

我一直在测试 react-sketchapp，到目前为止它看起来很整洁。除了呈现 Text、View、Image 等默认草图元素外，是否可以呈现包含 HTML-Markup 样式的默认 React 组件 HTML-Markup scss?

我尝试渲染以下 Hello-组件：

import React from 'react';
import { render, Artboard, Text, View } from 'react-sketchapp';

const Hello = () => (
  <View
    name={`Hello View`}
  >
    <Text name="Hello Text">
      <span>Hello World</span>
    </Text>
  </View>
);

const Document = () => (
  <Artboard
    name="Hello Board"
  >
    <Hello />
  </Artboard>
);

export default (context) => {
  render(<Document />, context.document.currentPage());
}

但我收到以下错误： Could not find renderer for type 'span' flexToSketchJSON

是否可以将包括 html / css 在内的默认 React 组件渲染到 Sketch 中？

Answer 1

您无法将 HTML 个元素渲染到 Sketch，就像您无法将 HTML 个元素渲染到 React Native 一样。

React 只是一种管理抽象组件树的方式。如何渲染这些组件需要由您使用的特定渲染器来定义。 react-sketchapp 是一个渲染器，可以理解渲染到 Sketch 元素的组件，但它不理解 HTML 元素，例如 div。（React Native 包含一个渲染器，它知道如何将 React Native 组件渲染到本机移动视图，react-music 是一个渲染器，它知道如何将 React Music 组件渲染成音频，等等）。

React 本身与 HTML 元素或 DOM 无关。 react-dom 渲染器库是渲染到 DOM 的神奇之处。如果您想将 HTML 个元素渲染到 Sketch，您需要编写一个 React 渲染器，它知道如何将 HTML 个元素转换为 Sketch 的文件格式。

Answer 2

有可能。

尝试研究将 React-Primitives 与 React-SketchApp 结合使用。 https://github.com/lelandrichardson/react-primitives

它在 React-SketchApp 的几个示例中，例如 https://github.com/airbnb/react-sketchapp/tree/master/examples/profile-cards-primitives

Answer 3

您可以使用 html-sketchapp 将任何 HTML/CSS 导出到 Sketch。

使用 react-sketchapp 渲染默认 HTML 和 CSS 到 Sketch

Rendering default HTML and CSS to Sketch with react-sketchapp

reactjs

sketch-3

react-sketchapp