React で Component クラスを使う

2024年6月13日By みのしす

Function を使った方法はよく紹介されていますが、あまり React.Component クラスを使う方法は紹介されていないので、備忘録として残しておきます。

Component クラスの拡張

Component クラスを使って React を実装する場合は、必ず拡張して使用します。そして、状態は state プロパティ、state の変更用に setState メソッド、描画用に render メソッドが用意されています。このうち、render メソッドを拡張クラスで提供する必要があります。

import { Component } from "react";
import { initialDatas } from "./initilaDatas";

export class ComponentEx extends Component {
  constructor(props) {
    super(props);
    this.state = [];
    this.datas = datas;
  }

  handle(id: string) {
    if (this.state.checked.includes(id)) {
      const checked = this.state.checked.filter((item) => item.id !== id);
      setState({ checked });
    } else {
      this.state.checked.push(id);
      setState(this.state);
    }
  }

  render() {
    return (
      <div>
        {
          this.datas.map((item) => { return (
            <div>
              <input type="checkbox" onClick={() => this.handle(item.id)} checked={this.state.checked.includes(item.id)} />
              {item.title} 
            </div>
          )});
        }
      </div>
    );
  }
}

type Data = {
  id: string,
  title: string
}
export datas: Data[] = [
  { id: "1", title: "オプション1" },
  { id: "2", title: "オプション2" },
];

函数呼び出しを使う場合

函数呼び出しを使う場合は useState メソッドを呼び出して現在値と変更メソッドを取得するのでした。

export function ComponentEx() {
  const [state, setState] = useState([]);
}

コンパクトに書けるという観点からは函数呼び出しに軍配が上がりそうです。

コメントを残すコメントをキャンセル