3

我一直在测试react-sketchapp到目前为止看起来很整洁。除了渲染默认的草图元素（如Text,等）之外View，Image是否可以渲染一个默认的 react 组件，其中包含带有 scss 样式的 HTML-Markup？

我尝试渲染以下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 在内的默认反应组件渲染到 Sketch？

4

3 回答 3

1

你不能将 HTML 元素渲染到 Sketch，就像你不能将 HTML 元素渲染到 React Native 一样。

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

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

于 2017-04-27T17:51:20.170 回答
1

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

于 2018-04-21T19:32:06.330 回答
0

有可能的。

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

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

于 2017-11-23T02:59:08.543 回答