React TypeScriptでのPropsの基本的な使い方

2024年11月27日

URLをコピーしました！

React TypeScriptでのPropsの基本的な使い方をここにまとめておく。

Propsの基本的な使い方

親コンポーネントの記述

index.tsx これが親のコンポーネント

// importなどの記述は省いている

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Gorira goriraname="Takeshi" />
  </React.StrictMode>
);

<Gorira goriraname=" CodeTips" /> このような記述を書くことでGoriraコンポーネントにgoriranameの値としてTakeshiを渡すことができる。propsの名前はgoriranameとしている。

ちなみにGoriraとか意味のわからない命名は避けよう。

子コンポーネントの記述

上の親コンポーネントの記載に合わせて、Goriraというコンポーネントを用意しなければならない。Gorira.tsxというファイルを用意しよう。

import React from 'react';

type GoriraProps = {
  goriraname: string;
};

const Gorira = (props: GoriraProps) => {
  return (
    <div>
      Gorira
      <h1>{props.goriraname}</h1>
    </div>
  );
};

export default Gorira;

この子コンポーネントであるGoriraで親コンポーネントから渡されているpropsの値を使用するには、引数としてpropsを受け取る必要がある。

const Gorira = (props: GoriraProps) => {

そして、このpropsの方を定義しなければならない。

type GoriraProps = {
  goriraname: string;
};

型の定義としてはtypeという書き方をして、オブジェクト形式でこの記事の例で親コンポーネントから受け取りたいgoriranameの型を定義する。

そして、最後にpropに入っているgoriranameを使用する記述を書く。

const Gorira = (props: GoriraProps) => {
  return (
    <div>
      Gorira
      <h1>{props.goriraname}</h1> //この部分
    </div>
  );
};

基本的なPropsを使用した最終的なコード

index.tsx 親コンポーネント

import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import Gorira from './Gorira';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Gorira goriraname="Takeshi" />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Gorira.tsx 子コンポーネント

import React from 'react';

type GoriraProps = {
  goriraname: string;
};

const Gorira = (props: GoriraProps) => {
  return (
    <div>
      Gorira
      <h1>{props.goriraname}</h1>
    </div>
  );
};

export default Gorira;

表示される画面

こんな感じに表示される。

よかったらシェアしてね！

URLをコピーしました！