React：componentでpropsの値を使いたい

Question

前提・実現したいこと

お世話になっております。
React-reduxで書かれたソースコードに手を加えているのですが、どうしても分からない箇所があるので質問させていただきます。
開発環境：React、Redux、Next.js、yarn、babel

該当のソースコード

export default ({ products, user }) => (
  //HTMLタグ
)

componentがこのようになっています。
他の画面ではclassとなっており　const { hoge } = this.props　で受け取れたのですが、同じように書くとエラーになってしまいます。
この場合、HTML内でpropsの値を使うにはどのように記述すればいいのでしょうか。
productsやuserのように渡せればいいのかもしれませんが、これをどうやって渡しているのかも分からず…
ご教授いただければ幸いです。よろしくお願いいたします。

Answer 1

関数コンポーネントの場合、唯一の引数としてprops全体が渡ってきます。{ products, user }は、それを受け取ったその場で分割代入しているだけです。

export default ({ products, user }) => (

// これと同じ意味
export default (props) => {
  const {products, user} = props;

productsやuserのように渡せればいいのかもしれませんが、これをどうやって渡しているのかも分からず…

はい、{ products, user, hoge }とすれば、同様にhoge="test"のように渡した値が取れます。

Comments

[onakahetta]

取得できました！
本当に助かりました。ありがとうございます！