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>
のように、引数を設定して実行しているところもたまに見る気がします。
これらをどのようにして使い分けているのかがわかりません。
引数を与えて実行したければ後者、引数が要らなければ(なぜ定義時に引数書いてる?)ば前者のように書くのでしょうか。それともそもそも全く別のものなのでしょうか。
だいぶ変に理解していてわかりにくい質問になってしまいすみませんん。
どなたかご教示願います。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/09/27 05:59