반응 스케치 응용 프로그램으로 스케치하기 위해 기본 HTML과 CSS 렌더링

Question

react-sketchapp을 테스트하고 있었는데 지금까지는 꽤 깔끔하게 보입니다. Text, View, Image 등과 같은 기본 스케치 요소를 렌더링하는 것 외에도 scss 스타일의 HTML- 마크 업을 포함하는 기본 반응 구성 요소를 렌더링 할 수 있습니까?

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 등의 반응

나는 다음과 같은 Hello -Component 렌더링 시도?

Answer 1

HTML 요소를 React Native로 렌더링 할 수없는 것과 마찬가지로 HTML 요소를 Sketch로 렌더링 할 수 없습니다.

React는 추상적 구성 요소의 트리를 관리하는 방법입니다. 이러한 컴포넌트를 렌더링하는 방법은 사용중인 특정 렌더러에 의해 정의되어야합니다. react-sketchapp은 Sketch 요소로 렌더링하는 구성 요소를 이해하지만 div과 같은 HTML 요소를 이해하지 못하는 렌더러입니다. React Native에는 React Native 구성 요소를 네이티브 모바일 뷰로 렌더링하는 방법을 알고있는 렌더러, react-music은 React Music 구성 요소를 오디오로 렌더링하는 방법을 알고있는 렌더러 등이 있습니다.

반응 자체는 HTML 요소 나 DOM과 아무 관련이 없습니다. react-dom 렌더러 라이브러리는 DOM으로 렌더링하는 마법이 일어나는 곳입니다. HTML 요소를 스케치로 렌더링하려면 HTML 요소를 스케치의 파일 형식으로 변환하는 방법을 알고있는 React 렌더러를 작성해야합니다.

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