質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • React.js

    829questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

propsの使い方がよく理解できない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 160

reactsan

score 6

 前提・実現したいこと

propsの使い方がよく理解できないです。

 該当のソースコード

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import './index.css'

const User = () =>{
  const users =[
    {name:"Tom",age:"20",adress:"NY"},
    {name:"John",age:"34",adress:"CF"},
    {name:"Juddy",age:"42",adress:"LN"}
  ]
  return(
    <div>
      <h1>ユーザー</h1>
      <table className="user">
      <thead>
        <tr><th>名前</th><th>年齢</th><th>住所1</th><th>住所2</th></tr>
      </thead> 
      <tbody>
        <UserItem user={users[0]} />
        <UserItem user={users[1]} />
        <UserItem user={users[2]} />
      </tbody>
      </table>
    </div>
  )
}

const UserItem = (props) =>{
  const { name,age,adress} = props.users
  return (
      <tr>
        <td>{name}</td>
        <td>{age}</td>
        <td>{adress}</td>
        <td></td>
      </tr>  
    )
  }
}

UserItem.propTypes ={
  users:PropTypes.object.isRequired
}

ReactDOM.render(
  <User />,
  document.getElementById('root')
)

というコードがあります。

const UserItem = (props) =>{
  const { name,age,adress} = props.users
  return (
      <tr>
        <td>{name}</td>
        <td>{age}</td>
        <td>{adress}</td>
        <td></td>
      </tr>  
    )
  }
}


の部分に対して質問です。

const { name,age,adress} = props.users


のprops.usersでなぜUserコンポーネントのusers配列を使えるのでしょうか?
スコープは関係ないのでしょうか?
また、

UserItem.propTypes ={
  users:PropTypes.object.isRequired
}


のusersはconst users の配列のことでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

こんにちは。

ご質問に挙げられているコンポーネント const UserItem の 本体一行目、

const { name,age,adress} = props.users

の右辺 props.users はおそらくタイポで props.user ならば正しいです。(users の "s" が不要)

同様に UserItem.propTypes の中の 

users:PropTypes.object.isRequired

も users  ではなくて、 user であれば正しいです。

ご質問のコードは、何かに掲載されているサンプルコードでしょうか?
もしそうであれば、オリジナルのものを今一度ご確認されるとよろしいかもしれません。


補足1

タイプミスと思える箇所がもうひとつあります。ご質問に挙げられているコード

イメージ説明

の最後に } がひとつ余分です。

補足2

参考までに、
user とすべきところが users になっている2箇所と、上記の余分な } を削除して
動作するようにしたものを以下に作成しました。

https://jsfiddle.net/jun68ykt/168mkpb2/3/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/02 23:09

    ありがとうございます。ご指摘の通りusersはuserでした!しかしこのuserは何のuserなのでしょうか?もしお分かりでしたら宜しくお願いします

    キャンセル

  • 2018/07/03 00:31

    @reactsanさん

    > ご指摘の通りusersはuserでした!

    とのことで、良かったです!

    > このuserは何のuserなのでしょうか?

    との疑問についてですが、確かに user と書いてあると、何か具体的なユーザ情報を
    この props名の user が意味しているように思えてしまいますね。

    ですが、この user は、UserItemの単なる props のひとつですので、
    user でなければならない、わけではありません。

    たとえば、 profile (プロフィール)でもよいですし、personalData でもよいです。

    以下は personalData にしてみたソースです。

    https://jsfiddle.net/jun68ykt/168mkpb2/6/

    配列、
    const users =[
    {name:"Tom",age:"20",adress:"NY"},
    {name:"John",age:"34",adress:"CF"},
    {name:"Juddy",age:"42",adress:"LN"}
    ]
    の各要素を受け渡しするための propsとして機能すればよいので、その名前が
    user でなければならない、ということはありません。とはいえ、たとえば data
    だとかcontent だと、漠然としているので、何らか、人物の属性が入っている
    props名をつけるのが望ましいです。

    上記で回答になっていますでしょうか?

    キャンセル

  • 2018/07/08 11:18

    ありがとうございます。とてもわかりやすかったです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • React.js

    829questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。