Reactで継承を使用した実装

Reactで継承を使用した実装

Reactで継承を使用した実装をTypeScriptで行う例を以下に示します。
Reactのコンポーネントは継承よりもコンポジションを推奨しますが、ここでは理解のために継承を使った例を紹介します。

import React from 'react';

// ベースのコンポーネント
class BaseComponent extends React.Component<{ message: string }> {
  render() {
    return (
      <div>
        <h1>{this.props.message}</h1>
      </div>
    );
  }
}

// 継承したコンポーネント
class DerivedComponent extends BaseComponent {
  render() {
    return (
      <div>
        {/* ベースコンポーネントのレンダーを呼び出し */}
        {super.render()}
        <p>追加のメッセージ: これは派生コンポーネントです。</p>
      </div>
    );
  }
}

// 使用例
const App: React.FC = () => {
  return (
    <div>
      <DerivedComponent message="こんにちは、世界！" />
    </div>
  );
};

export default App;

この例では、BaseComponentというベースのコンポーネントを作成し、それをDerivedComponentが継承しています。
DerivedComponentはBaseComponentのrenderメソッドを呼び出し、その出力に追加のメッセージを追加しています。

この方法で、簡単な継承を使ったReactコンポーネントを作成できますが、より複雑な場合はコンポジションを検討することをお勧めします。