React에서 Wijmo 사용하기

React 용 Wijmo 컴포넌트를 사용하면 React JSX 구문에서 Wijmo 컨트롤 를 사용할 수 있습니다. Wijmo React 컴포넌트 는 Wijmo 컨트롤을 나타내는 래퍼입니다. Component는 백그라운드에서 Wijmo 컨트롤을 만들고 control 속성을 통해 컨트롤 인스턴스에 대한 참조를 제공합니다. 컴포넌트 를 사용하면 React JSX 구문에서 컨트롤 속성 및 이벤트에 선언적으로 바인딩할 수 있습니다 .

참고 npm에서 설치하는 것 외에도 Wijmo Dev Kit을 다운로드하는 것을 적극 권장합니다. 개발 키트에는 소스 코드, 참조 앱 등이 포함된 수백개의 샘플이 포함되어 있습니다.

설치

Wijmo React 컴포넌트는 이름에 "react"라는 단어가 있는 코어 라이브러리 패키지 당 하나의 패키지인 npm 패키지 세트로 제공됩니다. 예를 들어 "wijmo.react.grid" 패키지는 핵심 "wijmo.grid"패키지의 컨트롤 컴포넌트 요소를 나타냅니다. "@grapecity/wijmo.react.all" 그룹 패키지를 사용하여 패키지를 개별적으로, 또는 함께 설치할 수 있습니다.

npm install @grapecity/wijmo.react.all

Wijmo components 임포트하기

이 설정을 사용하면 Wijmo React 모듈을 가져와 이 모듈에 포함된 구성 요소를 사용할 수 있습니다. 예를 들어, 이 코드는 App 구성 요소의 JSX에 FlexGrid 구성 요소를 추가합니다.

import * as React from "react";
import * as wjcGrid from "@grapecity/wijmo.react.grid";

class App extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      data: getData(),
    };
  }
  render() {
    return <wjcGrid.FlexGrid itemsSource={this.state.data} />;
  }
}

Wijmo css 추가하기

Wijmo 컨트롤이 올바르게 작동하려면 응용프로그램에 Wijmo css 스타일을 로딩해야 합니다. 이 스타일은 @gapercity/wijmo.stylesnpm 패키지로 부터 가져옵니다.

다음 ESM import 문을 사용하여, 응용프로그램의 .jsx/.js 루트 파일에 스타일을 로드할 수 있습니다.

import "@grapecity/wijmo.styles/wijmo.css";

더 많은 React 설명

React 애플리케이션에서 Wijmo 사용에 대한 자세한 정보는 React 컴포넌트 주제를 참조하십시오.