teratail header banner
teratail header banner
質問するログイン新規登録
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

解決済

2回答

1337閲覧

Reactでのpropsの渡し方について、

yasso

総合スコア6

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

0クリップ

投稿2022/04/10 02:48

0

0

前提

Reactで、親コンポーネントから子コンポーネントへのpropsの渡し方を学習しています。

質問

子コンポーネント側でのpropsの受け取り方について、確認したいことがあったため質問させていただきます。

親コンポーネント側

state = { videos:[] }
<City videos={this.state.videos}/>

という形で渡した場合、

子コンポーネント側で、

function City ({videos}){

こちらの表記では上手くいくのですが、

function City (videos){

こちらの表記ではエラーが発生してしまいます。

こちらの原因は、この子コンポーネントに渡されたpropsはオブジェクトであるため、中括弧が必要という解釈でよろしいのでしょうか?

ぜひ、お力を貸していただけると幸いです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/04/10 13:45

質問者さん、無言ですが、回答が出ているのでそれらに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐ返せるのでは? 役に立たなかったならどこがダメだったかを書くと、より期待するものに近い回答が出てくるかも。とにかく無言は NG です。
guest

回答2

0

ベストアンサー

こちらの原因は、この子コンポーネントに渡されたpropsはオブジェクトであるため、中括弧が必要という解釈でよろしいのでしょうか?

単に引数をspreadする形になっているだけです。function City (props)と書いた場合はprops.videosでアクセスできます。

投稿2022/04/10 05:05

編集2022/04/10 05:05
maisumakun

総合スコア146672

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

0

この子コンポーネントに渡されたpropsはオブジェクトであるため、中括弧が必要という解釈でよろしいのでしょうか?

中括弧で囲むのは JSX が変数を認識する方法ということで、そうしなければダメということだと思いますが。。

変数と props
https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started#variables_and_props


【追記】

Reactで、親コンポーネントから子コンポーネントへのpropsの渡し方を学習しています。

そこに対して、こうしてはいかがという例を書いておきます。

子コンポーネント City.js は以下のように引数を props にし、渡されるプロパティの中の subject という項目を表示するとします。

import React from 'react'; function City(props) { return ( <p>Hello {props.subject} from City</p> ); } export default City;

親は、上の回答で紹介した記事の App.js を使ってその中に City を subject="Clarice" というプロパティ設定と共に組み入れます。

import logo from './logo.svg'; import './App.css'; import City from './City'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> <City subject="Clarice" /> </header> </div> ); } export default App;

npm start で以下のようになります。 上の App.js のコードの <City subject="Clarice" /> の部分が期待通りに表示されているのが分かるでしょうか?

イメージ説明


【追記2】

下のコメント欄で、

質問されている内容が「function City ({videos})」の中括弧で、JSXの書き方とは別件だったので評価を下げました。

・・・というコメントがあったので、以下追記しておきます。

上の【追記】に書いた City.js を、質問者さんが書いた「こちらの表記では上手くいくのですが」のように即ち以下のようにしても、上の【追記】の画像と同じ結果になります。

import React from 'react'; function City({subject}) { return ( <p>Hello {subject} from City</p> ); } export default City;

という訳で、文法的に正しいのかどうかは分かりませんが、最初の回答で書いた「中括弧で囲むのは JSX が変数を認識する方法」ではあると思います。

ちなみに、引数の { } を外すと、npm start で Complied Successfully! とは出るものの、ブラウザには何も表示されない(空白になる)という結果になりました。

投稿2022/04/10 03:46

編集2022/04/11 09:03
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/04/10 07:16

黙ってマイナス評価をしたのは誰? 名乗って理由ぐらい書いたらいかが?
maisumakun

2022/04/10 14:08

質問されている内容が「function City ({videos})」の中括弧で、JSXの書き方とは別件だったので評価を下げました。
退会済みユーザー

退会済みユーザー

2022/04/10 21:32

> function City ({videos}){ という書き方で { } が必要なのは JSX が変数を認識する方法ということで、あなたの言う「JSXの書き方」ではあると思うのですが。props の書き方ではないでしょうけど。
k4a

2022/04/24 14:05

回答から数日立っていますが、目に入ったのでコメントします。 オブジェクトの分割代入という純粋なJSの構文ですので、「JSXが変数を認識する方法」ではありません。 使用する場所がJSXでも関数コンポーネントのルート部分でも関係ありません。 低評価は間違った判断ではないと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問