React JS で拡張

継承は、オブジェクト指向アーキテクチャの重要な概念です。 React JS では、主に継承を使用して React.Component にアクセスし、UI を構築します。

たとえば、ほとんどの場合、class ClassA extends React.Component を使用します。これは、ClassA が React.Component の要素にアクセスできることを意味します。

この記事では、React JS の extends キーワードについて説明します。 また、トピックを簡単にするための説明付きの例も見ていきます。

React JS で extends キーワードを使用する

以下の例では、React JS の継承に関する簡単な例について説明します。 まず、以下のサンプルコードを見てください。

import React from 'react';

class ClassA extends React.Component {
  render() {
    return <h2>I am from ClassA<
               /h2>;
  }
}

class ClassB extends React.Component {
  render() {
    return (
      <div>
      <h1>I am from ClassB</h1>
        <ClassA />< /div>
    );
  }
}
  export default ClassB;

上記の例では、キーワード extends を使用して React.Component のコンポーネントにアクセスしています。

クラス間の参照には、以下の一般的な構文を使用します。

<ClassName />

これにより、クラスからのデフォルトのエクスポートにアクセスします。 クラス内にさらに要素がある場合は、次のようにインポートできます。

import {element1, element2, ...} from './YourClass';

そして、以下に示すように簡単にアクセスできます。

<element1 />

すべてのファイルの処理が完了すると、ブラウザに以下の出力が表示されます。

React コンポーネントの継承に関する別の例を見てみましょう。 ここでは、コンポーネントを別のクラスから直接拡張する方法を示します。

import React from 'react';

class Class_Parent extends React.Component {
  constructor(props) {
    super(props);
    this.Parent_Class_Function = this.Parent_Class_Function.bind(this);
  }

  // Function of Parent Class.
  Parent_Class_Function() {
    console.log('This is a parent class method.');
  }

  render() {
    return false;
  }
}

export default class Class_Child extends Class_Parent {
  constructor() {
    super();
  }
  render() {
    this.Parent_Class_Function();
    return false;
  }
}

上記の例は、React JS の別のクラスからコンポーネントを拡張する方法を示しています。

上記の関数では、関数 Parent_Class_Function() を持つ Class_Parent という名前のクラスを作成しました。 その後、次の行で Class_Parent を拡張する別のクラスを生成しました。

export default class Class_Child extends Class_Parent

これで、親関数 Parent_Class_Function() に簡単にアクセスできます。

上記の例を実行すると、Web コンソールに以下の出力が表示されます。

This is a parent class method.

このチュートリアルでは react-select パッケージを使用するため、アプリケーションを実行する前にこのパッケージをインストールする必要があります。 これは、npm を使用して簡単にインストールできます。

この記事で共有するサンプル コードは、React JS プロジェクトで記述されています。 React プロジェクトを実行するには、最新の Node JS バージョンがシステムにインストールされている必要があります。

システムに Node JS が含まれていない場合は、最初にインストールします。