React Components

• React 버전 15.0.0 이상을 지원합니다 .

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

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

npm install @mescius/wijmo.react.all

Wijmo의 NPM 패키지에 대한 자세한 내용은 해당 주제 를 참고해주세요.

그런 다음 ESM import 문을 사용하여 모듈을 가져올 수 있습니다. 예를 들어,이 import 문은 "wijmo.react.grid" 모듈의 컨텐츠를 가져옵니다.

import * as wjcGrid '@mescius/wijmo.react.grid';

Wijmo 컴포넌트 가져 오기

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

import * as React from "react";
import * as wjcGrid from "@mescius/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 스타일을 응용 프로그램에 로드해야 합니다. 스타일은 @mescius/wijmo.styles npm 패키지로 제공됩니다. 두 가지 주요 CSS 파일이 있습니다.

• wijmo.css- 모든 Wijmo 컨트롤에 대한 스타일 포함

• wijmo-core.css- 엔터프라이즈 컨트롤 스타일이 포함되지 않은 wijmo.css의 개별 버전입니다.

이 ESM import 문을 사용하여 애플리케이션의 .jsx/.js 루트 파일에 스타일을 로드할 수 있습니다.

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

React JSX 구문

Wijmo React 구성 요소는 JSX 구문으로 구성하기 위해 일관된 이름 지정 규칙을 사용합니다. 속성 및 이벤트 바인딩에 대한 속성은 기본 JavaScript 컨트롤에서와 동일한 이름으로 속성을 노출합니다. 예를 들면 다음과 같습니다.

render() {
    return <div>
        <wjcInput.InputNumber
            value={this.state.amount} // binding to a component property
            format="n0" // binding to a string
            isReadOnly={true} // binding to boolean
            valueChanged={this.valueChanged} /> // event binding
    </div>;
}

이벤트 바인딩 세부 사항

Wijmo 이벤트 핸들러는 sender 및 event 인자의 두 매개 변수를 가진 함수로 정의됩니다. 구성 요소 이벤트에 바인드 할 때 이 서명이 있는 함수의 이름을 바인딩 소스로 지정해야 합니다. 예를 들면 다음과 같습니다.

constructor(props) {
    super(props);
    this.state = { amount: 0 };
    this.onValueChanged = this.onValueChanged.bind(this);
}

render() {
    return <div>
        <wjcInput.InputNumber
            value={this.state.amount}
            valueChanged={this.onValueChanged} />
    </div>;
}

onValueChanged(sender, args) {
    this.setState({ amount: sender.value });
}

"초기화" 이벤트

모든 Wijmo React 컴포넌트에는 컨트롤이 페이지에 추가되고, 초기화된 후에 발생하는 "초기화(initialized)"이벤트가 포함 됩니다.

이 이벤트를 사용하여 JSX에서 특성을 설정하는 것 외에도 추가 초기화를 수행할 수 있습니다. 핸들러 함수의 서명은 다른 Wijmo 이벤트 핸들러와 동일합니다. 예를 들면 다음과 같습니다.

constructor(props) {
    super(props);
    this.initGrid = this.initGrid.bind(this);
}

render() {
    return <div>
        <wjcGrid.FlexGrid initialized={this.initGrid} />
    </div>;
}

initGrid(grid, args) {
    grid.mergeManager = new CustomMerge(grid);
}

코드에서 Wijmo 컨트롤 만들기

React 용 Wijmo 컴포넌트 는 React JSX에서 사용하기 위한 것입니다. 코드에서 Wijmo 컨트롤을 만들려면 컴포넌트 대신, core 모듈의 Wijmo 컨트롤을 사용해야 합니다. core 모듈은 해당 React interop 모듈과 이름이 동일하지만 이름에 "react"단어가 없습니다. 예를들어, 이 코드는 코드에서 FlexGrid 컨트롤을 만듭니다.

import { FlexGrid } from "@mescius/wijmo.grid";
let flex = new FlexGrid("#host_element");