基本に戻る：Reactの小道具とは何ですか？それらはどのように機能しますか？

JavaScriptで引数と関数がどのように機能するかをすでに理解している場合は、 小道具ケーキです！ 一言で言えば、propsは、Reactの親コンポーネントから子コンポーネントにデータを渡すために使用され、コンポーネント通信の主要なメカニズムです。 つまり、本質的に、小道具はReactコンポーネントパターンが機能することを可能にするものの主要な部分です。

ほとんどの優れた発明のように、すべてをまとめる単純なコアアイデアが常にあります。 Reactでは、間違いなく props システムであり、JavaScript関数と同じようにReactコンポーネントを扱うことができます。

小道具===関数パラメータ

あなたがすでに「小道具」が何であるかを知っているとあなたに言ったら、あなたは何と言いますか？ ええと、JavaScriptを知っているなら…そうです！ 😜

このバニラJavaScript関数について考えてみましょう。

function Greeter(name) {
  return 'hello ' +name;
}

nameという単一のパラメーターがあります。 パラメータに異なる引数を渡すと、異なる結果が得られます。

Greeter('world')
// --> "hello world"

Greeter('dolly')
// --> "hello dolly"

Greeter('its me')
// --> "hello its me"

これはReactとどのように関係していますか？

Reactコンポーネントは、本質的にJavaScript関数と考えることができます。 この点を説明するためにReactコンポーネントを作成しましょう。

function Greeter(props) {
  return <p>hello {props.name}</p> 
};

そして、<Greeter/>コンポーネントを呼び出します…

function App() {
  return (
    <div>
      <h1>HELLO APP</h1>
      <Greeter name="world"/>  {/* 💥 "world" is the prop value*/}
    </div>
  )
};

プロップ値を<Greeter/>に渡したところ、Greeterコンポーネントがnameプロップの値にアクセスできるようになります。 つまり、一言で言えば、すべての小道具です！ 次のようにGreeterを呼び出す代わりに：

Greeter('some value');
// --> "some value"

JSXと呼ばれるこのHTML風の構文で呼び出します。

<Greeter name="some value"/>
// --> <p>hello some value</p>

そして、Greeterは、次のように渡された小道具にアクセスできます。

import React from 'react';

function Greeter(props) {
  return (
    <p>hello {props.name}</p>
  )
}

export default Greeter;

Reactで小道具を渡すこの構文は、属性を使用して特定の「プロパティ」をHTML要素に付与するHTMLの世界からのものです…したがって、省略語props🤯

---

Reactの初心者として、propsをまったく新しい奇妙なものと考えたくなるかもしれません。 代わりに、それらを関数に提供している引数として単純に考えてみてください…その核となるのはそれだけだからです。