渲染默认的HTML和CSS用React-Sketchapp绘制素描

Question

我正在测试到目前为止看起来很整洁的react-ketchapp。除了呈现默认的草图元素，例如Text，View，Image等，还可以渲染包含具有SCSS样式的HTML-Markup的默认React 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

渲染默认的反应组件，包括HTML/CSS来绘制可能？

Answer 1

您无法渲染html元素来绘制素描，与无法呈现html元素以对本机进行反应。

React只是管理抽象组件树的一种方式。如何渲染这些组件需要由您使用的特定渲染器定义。react-sketchapp是一个渲染器，可以理解渲染以绘制元素的组件，但它不了解诸如div之类的HTML元素。(React Native包括一个渲染器，该渲染器知道如何渲染对本机移动视图的本地组件，React-Music是一个渲染器，知道如何将React Music组件渲染到音频等等(。

。

反应本身与HTML元素或DOM无关。react-dom渲染器库是渲染到DOM的魔力。如果要渲染HTML元素以素描，则需要编写一个React渲染器，该渲染器知道如何将HTML元素转换为Sketch的文件格式。

Answer 2

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

Answer 3

这是可能的。

尝试研究与React-Sketchapp一起使用React-Primitives。https://github.com/lelandrichardson/reeact-primitives

在React-Sketchapp中的一些示例中，例如https://github.com/airbnb/react-sketchapp/tree/master/master/examples/profile-cards-primitives