✨

Reactの props の正体はオブジェクト

2024/06/22に公開

React

TypeScript

プログラミング初心者

tech

タイトルの通り、Reactのpropsを学習したのでまとめます。

`props` とは？

propsはコンポーネントにデータを渡すための手段。propsはオブジェクトであり、その中には親コンポーネントから渡されたすべてのデータが含まれています。

例えば、以下のようなコンポーネントがあった時、

import React from 'react';

// 親コンポーネント
function App() {
  return (
    <>
      <h1>ボタン</h1>
      <Button text={'Hello World'} onClick={() => console.log('Hello')} />
    </>
  );
}

// 子コンポーネント
function Button(props) {
  return (
    <div>
      <button onClick={props.onClick}>{props.text}</button>
    </div>
  );
}

export default App;

この時、親から子に渡るpropsの中身は次のとおりです。


{
  text: 'Hello World'
  onClick:()=> console.log('Hello')
}

このため、props.textとすることでHello Worldという値にアクセスすることができ、props.onClick とすることで、()⇒ console.log('Hello') という関数にアクセスできます。

また、props からプロパティを取得するのではなく、分割代入でプロパティを変数として取得すると次のようになります。

import React from 'react';

// 親コンポーネント
function App() {
  return (
    <>
      <h1>ボタン</h1>
      <Button text={'Hello World'} onClick={() => console.log('Hello')} />
    </>
  );
}

// 子コンポーネント
function Button({text, onClick}) {
  return (
    <div>
      <button onClick={onClick}>{text}</button>
    </div>
  );
}

export default App;

こちらの方がスッキリしてます。

またchildren としてprops を渡す際も同じです。

function A (){
return (
 <UnorderedList>
  <li>Hello World</li>
 </UnorderedList>
)}

このとき、UnorderedListコンポーネントには次のようなpropsオブジェクトが渡されます


{
  children: <li>Hello World</li>
}

function UnorderedList({ children }) {
  return (
    <ul>
      {children}
    </ul>
  );
}

まとめ

<button>{props.text}</button>とすることで、親コンポーネントから渡されたプロパティtextの値をボタンの中に表示することができます。またpropsはオブジェクトなので、そのまま<button>{props}</button>のようにして表示することはできません。

このように、Reactではコンポーネント間でデータを渡すためにpropsという名のオブジェクトを使用し、必要なプロパティにアクセスして表示や処理を行います。

props とは？

まとめ

Discussion

`props` とは？