前回はコンポーネントを作成し、各々のコンポーネントでブラウザへ文字を表示させました。

今回はコンポーネントへ値を渡し、渡した値をブラウザへ表示させます。

値の渡し方

コンポーネントへ値を渡すには、コンポーネントへ属性(attribute)を指定します。指定した属性を経由してコンポーネントへ値が渡されます。

今回は、App コンポーネント から Sample コンポーネント へ値を渡します。以下は Appコンポーネント になります。

import Sample from './Sample';

function App() {
  return (
    <>
      <div>{"TEST"}</div>
      <Sample str_txt = "SAMPLE" />
    </>
  );
}

export default App;

Sample コンポーネントへ “str_txt” という属性名を指定し、属性値に “SAMPLE” という文字列を指定しています。

値の受け取り方

続いて以下は、値を受け取る Sampleコンポーネント になります。

function Sample(props) {
  return (
    <p>{props.str_txt}</p>
  );
}

export default Sample;

コンポーネントの引数から値を受け取る事ができます。引数名は任意で構いません。今回は “props” という名前を使用しましたが、”my_props” などとしても良いです。引数のプロパティへ、属性名を指定すると属性値を参照する事が可能です。今回は “props.str_txt” で属性値を取得しています。

“引数名.プロパティ名” と毎回書くのが面倒な場合、以下のようにしても属性値を取得する事ができます。

function Sample({str_txt}) {
  return (
    <p>{str_txt}</p>
  );
}

export default Sample;

最後に

特にありません。