【TypeScript】Reactで関数に引数を設定し、関数を使用し表示を行う方法ご紹介。

TypeScript

2021.11.21

今回の記事はTypeScriptベースのReactで関数に引数を設定し、JSXで関数を使用する際に引数を指定して表示を行う方法に関する記事です。初心者にも分かりやすいように記載していくので、是非参考にしてみて下さい。

TypeScriptのReactプロジェクト作成
Reactで引数ありの関数を作成
Reactで関数を使用

TypeScriptのReactプロジェクト作成

node等がインストールされてない方はインストールして下さい。その前提で話を進めます。

npx create-react-app sample --template typescript

まずは上記で「sample」プロジェクトを作成します。

cd sample
npm start

これでローカルサーバが立ち上がって初期画面が表示できます。

では関数コンポーネントを作成し、使ってみましょう。

Reactで引数ありの関数を作成

type Props = {
  str:string
}

const Label1 = (props:ProPs) => {
  return (
    <div>
      {props.str}
    </div>
  )
}

func Label2(props:ProPs) {
  return (
    <div>
      {props.str}
    </div>
  )
}

関数の形はアロー関数を用いるか通常の書き方をするかの2通りあります。どちらでもOkです。今回は2通りを準備します。

ではこの用意した関数をどのように使っていくかをみていきます。

Reactで関数を使用

import React from 'react';
import SelectBox1 from './SelectBox1';

type Props = {
  str:string
}

const Label1 = (props:ProPs) => {
  return (
    <div>
      {props.str}
    </div>
  )
}

func Label2(props:ProPs) {
  return (
    <div>
      {props.str}
    </div>
  )
}

const App: React.VFC = () => {
  return (
    <div>
      <Label1 str="Label1の表示"/>
      <Label2 str="Label2の表示"/>
    </div>
  );
}

export default App;

propsで指定した引数に下記表記で文字列を渡して関数内で使用しているという流れです。

<Label1 str="Label1の表示"/>

別ファイルから値を取ってくるのが一般的なのでその場合は、関数コンポーネントを別ファイルから取ってくる記述を追加して下さい。

これで再度ビルドすることでアプリを画面に反映することができます。確認してみて下さい。