ReactでWijmoを使用する

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

ReactのコマンドラインツールCreate React Appを使用してアプリケーションを作成する方法については、「React & Wijmoクイックスタート」ブログを参照してください。

インストール

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

npm install @mescius/wijmo.react.all

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パッケージに含まれます。

次のimport(ESM)ステートメントを使用して、アプリケーションの.jsx/.jsルートファイルにスタイルをロードできます。

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

その他のReactの使用方法

ReactアプリケーションでWijmoを使用する方法の詳細については、Reactコンポーネントのトピックを参照してください。