Reactコンポーネントのファンクショナルコンポーネントとは

Reactコンポーネントのファンクショナルコンポーネントとは

ファンクショナルコンポーネントとは、その名のとおり関数で定義します。

const Test = (attr) => {
  return <h1>hello, world</h1>;
};

引数にattrをとり、JSX文法をreturnしています。

ファンクショナルコンポーネントは再利用できる

Reactコンポーネントは再利用することが出来ます。

先ほどのファンクショナルコンポーネントも定義なので、再利用することが出来ます。

再利用する方法は以下のとおりです。閉じタグが必要となります。

<Test />

わかりやすいように以下のように記述してみます。

<div id="koko"></div>
  <script type="text/babel">
    const Test = (attr) => {
      return <h1>hello, world</h1>;
    };
    ReactDOM.render(
      <Test />,
      document.getElementById("koko")
    )
  </script>

サンプル

Reactコンポーネントのファンクショナルコンポーネントとは

コメント

タイトルとURLをコピーしました