React

Reactでシングルクリックとダブルクリックを区別して使いたい

先に今回の話のソースコードです。 github.com Reactでは シングルクリックイベントとダブルクリックイベントが用意されています。 シングルクリック <a href="javascript:void(0)" onClick={(e) => this.handleOnSingleClick(e)}> Single Click </a> onClickイベントが用意されています。 ダブルクリック <a href="javascript:void(0)" onDoubleClick={(e) => th</a>…

TypeScript2からのReactとnon-null assertion

TypeScript2からコンパイルオプションの strictNullChecks で、nullability をチェックできるようになった。 最近になってこのオプションを有効にしたら意外と修正するところが多かったのでメモ。 TypeScript1系の時は↓の様に書いてました。 import * as Rea…

TypeScriptでReactを書くときはStateのパラメータに?を付ける

TypeScriptでReactを書いているとき、Stateに複数パラメータを用意した時に ? を付けてオプションパラメータにします。 そうしないと、setState の更新時に全てのパラメータを更新しないといけなくなります。 なので、必ず付けろというよりは、パラメータを…

ReactでのHTML描画について

Reactで文字列のHTMLを文字列として描画するのではなく、HTMLで描画する。 方法 dangerouslySetInnerHTML を使う。 <span dangerouslySetInnerHTML={{__html: htmlString}}> の様な形で、htmlString にはHTMLが文字列で代入されています。 こうすることで、 htmlString の値を文字列としてではなく、HTMLとして表示</span>…