将默认的HTML和CSS呈现给Sketch，并使用react草图

Question

我一直在测试反应草图，到目前为止，它看起来相当整洁。除了呈现默认的草图元素(如Text、View、Image等)之外，是否可以呈现包含使用scss样式的HTML标记的默认react组件？

我尝试呈现以下Hello-Component：

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

是否可能将默认的react组件(包括html / css )呈现给Sketch？

Answer 1

不能将HTML元素呈现给Sketch，就像不能呈现HTML元素以响应本机一样。

React只是管理抽象组件树的一种方式。如何呈现这些组件需要由您正在使用的特定呈现器定义。react-sketchapp是一个渲染器，它理解呈现给Sketch元素的组件，但它不理解div之类的HTML元素。( React本机包括一个渲染器，它知道如何将本机组件呈现给本地移动视图，反应音乐是一个渲染器，它知道如何将音乐组件呈现为音频，等等)。

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

Answer 2

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

Answer 3

这是可能的。

试着使用React-Primitives和React SketchApp。https://github.com/lelandrichardson/react-primitives

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