Reactコンポーネント

React用のWijmo コンポーネント は、React JSX構文でWijmo コントロール を使用できるようにします。 Wijmo React コンポーネント は、それが表すWijmo コントロール のラッパーです。コンポーネント は、背後でWijmo コントロール を作成し、controlプロパティを介してコントロールインスタンスへの参照を提供します。コンポーネント を使用すると、React JSX構文で宣言的に コントロール のプロパティおよびイベントに連結できます。

Wijmo Reactコンポーネントは、名前に「react」を含む一連のモジュール（1つのコアライブラリモジュールに対して1つのモジュール）として出荷されています。たとえば、「wijmo.react.grid」パッケージは、コアの「wijmo.grid」パッケージのコントロールのコンポーネントを表します。パッケージは別々にインストールすることも、「@mescius/wijmo.react.all」グループパッケージを使ってまとめてインストールすることもできます。

npm install @mescius/wijmo.react.all

Wijmo npmパッケージの詳細については、npmによるWijmoの参照トピックを参照してください。

その後、ESMのimportステートメントを使用してモジュールをインポートできます。たとえば、次のimport文は"wijmo.react.grid"モジュールの内容をインポートします。

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

Wijmoコンポーネントのインポート

この設定により、Wijmo Reactモジュールをインポートし、モジュールに含まれるコンポーネントを使用できます。たとえば、次のコードは、FlexGridコンポーネントをAppコンポーネントの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} />
    }
}

関数コンポーネント

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

const App = () => {
  const [data] = React.useState(getData(5));
  return (
    <>
      <wjcGrid.FlexGrid itemsSource={data}></wjcGrid.FlexGrid>
    </>
  );
};

Wijmo CSSの追加

Wijmoコントロールを正常に表示および動作させるには、Wijmo CSSファイルをアプリケーションにロードする必要があります。スタイルは @mescius/wijmo.styles npmパッケージに含まれます。主要なCSSファイルは2つあります。

wijmo.css：すべてのWijmoコントロールのスタイルが含まれます。
wijmo-core.css：wijmo.cssの縮小版で、Enterprise専用コントロールのスタイルは含まれません。

次のESMインポートステートメントを使用して、アプリケーションの.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イベントハンドラは、送信元とイベント引数の２つのパラメータを持つ関数として定義されます。コンポーネントイベントに連結するときは、連結ソースとしてこのシグネチャを持つ関数の名前を指定する必要があります。

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 });
}

「initialized」イベント

すべての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 コンポーネント は、テンプレートマークアップで使用されます。コードでWijmoコントロールを作成する場合は、コンポーネントではなく、その目的で用意されているコアモジュールのWijmo コントロール を使用する必要があります。コアモジュールの名前は、対応するReact相互運用モジュール名から「react」を省略した名前と同じです。たとえば、次のコードは、コードでFlexGridコントロールを作成します。

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

Reactコンポーネント
Wijmoコンポーネントのインポート
Wijmo CSSの追加
React JSXの構文
イベント連結の詳細
「initialized」イベント
コードでのWijmoコントロールの作成