Props

コンポーネントが渡されて関数が動く仕組み

import React from 'react';
import ReactDOM from 'react-dom';

// 子コンポーネント（先に書いてもOK）
const Child = (props) => {
  return <p>{props.message}</p>;
}

// 親コンポーネント（あとから書いてもOK）
const Parent = () => {
  return <Child message="こんにちは" />;
}

• 親コンポーネントが子コンポーネントを呼び出す

• 呼び出すときにProps（データ）を渡す

• 子コンポーネントは親から渡されたPropsを受け取って動く

• Propsがないと子コンポーネントは意味のある動作をしない（何も表示しなかったり）

• だから「親がPropsを渡して初めて子の関数が動く」という流れになる

// 親コンポーネント
import Child from "./Child";
import React from "react";

const Parent = () => {
  // 親で定義した変数
  const handleSubmit = () => {
    console.log('Propsが送信されました')
  };
  return <Child onSubmit={handleSubmit} />;
};

// 子コンポーネント
import React from "react";

// Propsの型を指定
type ChildProps = {
  onSubmit: () => void;
}

// <>にPropsとしての型、引数に受け取った関数を{}つけて渡す
const Child: React.FC<ChildProps> = ({onSubmit}) => {
  return(
    <button 
     onClick={onSubmit}
    >
     商品を登録する
    </button>
  );
};

export default Child;