React 分岐条件、繰り返し、イベント処理

分岐条件と繰り返し

• 繰り返し
  Array#mapを使ってコンポーネントを返す

{articles.map((article) => 
  return <MyArticle {...article} key={article.url}/>
)}

• key
  リストなどはタグにkeyをつけることで更新、追加の判別が可能となり、無駄な処理がなくなる。 keyはユニークであれば何でも良い。

• 分岐
  ?: 3項演算子
  && trueの場合だけ表示
  {}の中で即時関数でifも使えるが、複雑な場合は無理せず、関数やコンポーネントにする

イベント処理

• onEvent
  jsとは違いJXSではcamelCaseで書く。
  onClick onChange onFocus onKeyUp など

<MyEvent onChange={this.show.bind(this)} />

• イベントオブジェクト
  生のjavascriptとは似ているが異なる。（SynteticEvent）
  イベントハンドラの引数eなどでアクセス。
  e.target 発生した要素
  e.type 種類
  e.preventDeafult()
  生のイベントオブジェクトは、e.nativeEventでアクセスする

• 独自データ属性
  タグにdata-xxxという名前の属性を付与すると、e.target.datasest.xxxでアクセスできる。 属性によってでイベントを場合分けしたい場合など