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

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

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

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

Q&A

解決済

2回答

5058閲覧

Reactの自作メソッドの引数について

退会済みユーザー

退会済みユーザー

総合スコア0

React.js

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

0グッド

1クリップ

投稿2017/09/27 01:36

React初心者です。

コンポーネント内に引数ありの自作メソッドを作成することがあると思いますが、これを実行する時に引数なしで実行していたり、引数ありで実行っしていたりしているコードを見るのですが、これはどんな違いなのでしょうか。

具体的にはこのOnsenUIのドキュメントに書いてあるコードですが

コンポーネントの中でrenderRowというメソッドを定義してその引数にrow,indexと書いてあります。(rowに関してはメソッド内にでてこないのもよくわかりません)

javascript

1 renderRow: function(row, index) { 2 const x = 40 + Math.round(5 * (Math.random() - 0.5)), 3 y = 40 + Math.round(5 * (Math.random() - 0.5)); 4 5 const names = ['Max', 'Chloe', 'Bella', 'Oliver', 'Tiger', 'Lucy', 'Shadow', 'Angel']; 6 const name = names[Math.floor(names.length * Math.random())]; 7 8 return ( 9 <Ons.ListItem key={index}> 10 <div className='left'> 11 <img src={`http://placekitten.com/g/${x}/${y}`} className='list-item__thumbnail' /> 12 </div> 13 <div className='center'> 14 {name} 15 </div> 16 </Ons.ListItem> 17 ); 18 },

このメソッドを使っているのはrender()の中です。

javascript

1 render: function() { 2 return ( 3 <Ons.Page renderToolbar={this.renderToolbar}> 4 <Ons.List 5 dataSource={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]} 6 renderRow={this.renderRow} 7 renderHeader={() => <Ons.ListHeader>Cute cats</Ons.ListHeader>} 8 /> 9 </Ons.Page> 10 ); 11 }

関数っぽく考えるならthis.renderRow(foo,bar)のようにして実行するかと思いますが、ここではthis.renderRowのみです。

かと思えば、

javascript

1<div onClick={()=>this.renderRow(foo,bar)}></div>

のように、引数を設定して実行しているところもたまに見る気がします。

これらをどのようにして使い分けているのかがわかりません。
引数を与えて実行したければ後者、引数が要らなければ(なぜ定義時に引数書いてる?)ば前者のように書くのでしょうか。それともそもそも全く別のものなのでしょうか。

だいぶ変に理解していてわかりにくい質問になってしまいすみませんん。
どなたかご教示願います。

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

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

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

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

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

guest

回答2

0

ベストアンサー

renderRow={this.renderRow} この部分は「プロパティrenderRowに対し、this.renderRowという関数オブジェクトを渡す」という意味です。関数は後ろに()を付けることで「呼び出し」が実行され、実際に関数の中の処理が走ります。しかし、()を付けずに関数名だけを書くと、それは「関数オブジェクト」を指します。

JavaScript

1function hoge() { 2 console.log('Hello!'); 3} 4 5hoge(); // Hello!と出力される 6 7var f = hoge; // fという変数にhogeの関数オブジェクトを代入 8f(); // fには関数オブジェクトが格納されており、()をつけることでhogeが実行され、Hello!と出力される

このように、関数オブジェクトを渡せば「別のコードの中で、こちらが渡した関数を実行してもらう」ということが可能になります。react-onsenuiでソースコードを見てみると、以下のような処理がOns.List内に書かれています。

JavaScript

1 2 render() { 3 var pages = this.props.dataSource.map((data, idx) => this.props.renderRow(data, idx)); 4 5 return ( 6 <ons-list {...this.props} ref='list'> 7 {this.props.renderHeader()} 8 {pages} 9 {this.props.children} 10 {this.props.renderFooter()} 11 </ons-list> 12 ); 13 }

pagesにはdataSourceのデータを1つずつ読み出してrenderRowの引数row,indexとして実行したものをリストとして受け取っています。それがons-list内に埋め込まれています。

渡したthis.renderRowはこのようにOns.List内から呼び出されています。そのrowindexをどう使うかは書いた人次第です。

<div onClick={()=>this.renderRow(foo,bar)}></div> このようなコードをどこで見たのかはわかりませんが、これは普通に「関数を呼び出している」だけです。

投稿2017/09/27 01:59

masaya_ohashi

総合スコア9206

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

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

退会済みユーザー

退会済みユーザー

2017/09/27 05:59

わかりやすい解説ありがとうございました。 長年の謎が解けました。
guest

0

関数っぽく考えるならthis.renderRow(foo,bar)のようにして実行するかと思いますが、ここではthis.renderRowのみです

関数を実行しているのではなく、関数オブジェクトをpropsを通して子のコンポーネントに渡しているのです。子のコンポーネントの方で、this.props.renderRow()みたいに引数あり、または無しで実行しているはずです。

<div onClick={()=>this.renderRow(foo,bar)}></div>

ここも関数を実行してるわけではないです。

クリックイベントに無名関数を紐づけているだけです。その際、onclick={this.renderRow}としても良いのですが、この場合だとrenderRowに引数を渡せないので、上のように無名関数を使っているわけです。

スマホからの入力なので雑な回答ですが、こんな感じです。

投稿2017/09/27 01:58

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問