Reactで文字列として受け取った引数を使って配列の操作をしようとしたら思うようにいかなかった。
こんな風に書いたらいいんだという、JSの記法を学んだので書き残し。
結論、ドット記法ではなくブラケット記法を使えばうまくいく。
前提
onMouseDownというイベントを2カ所で使っていて、それにイベントが発火するとonMouseDownHandler関数が呼び出される。
この時、2カ所のどちらでイベントが発火したかわかるように以下のようにtopかbottomかという引数を渡すことにした。
onMouseDown = {event => onMouseDownHandler(event, "top")};
...
onMouseDown = {event => onMouseDownHandler(event, "bottom")};stateにはtopという配列とbottomという配列があって、引数として受け取った”top”または”bottom”に応じて、このどちらかのstateを操作したい。
ちなみにtopとbottomには配列の中に配列が入っているという形。
this.state = {
top: [[]],
bottom: [[]],
}うまくいかなかった例
最初こんな風に実装した。
第二引数にtopまたはbottomが入ってきているので、それをtopOrBottomとして受け取り、それを使ってstateの中のtopかbottomかを指定する作戦。
onMouseDownHandler = (event, topOrBottom) => {
this.state.topOrBottom[index.row] ... //index.rowは配列の行番号を指定
}しかし、ここでエラー。
なぜかというと、topOrBottomは文字列(“top”または”bottom”)なのでstate.topOrBottomは受け付けてくれないらしい。
人の目で見るとここにtopかbottomが代入されるんだから同じじゃんと思うけど、プログラムは厳密だ。
うまくいった例
さて、じゃあどうすればいいのかというと、記法を変えればいい。
下記のようにするとうまくいった。
onMouseDownHandler = (event, topOrBottom) => {
const topOrBottomState = this.state[topOrBottom]
topOrBottom[index.row] ... //index.rowで配列の行番号を指定している
}色々記述が増えているが、要はstate.topOrBottomの代わりにstate[topOrBottom]にしたってだけのこと。
(本当はスプレッド構文使ったけど、ここでは簡略化のため省略)
うまくいった理由
そもそもオブジェクトのプロパティにアクセスする方法にはドット記法とブラケット記法というのがある。
ドット記法
いつもよく使うstate.topのようなドットでつなげる方法
ブラケット記法
state[“top”]のようにブラケットの中に文字列を使う方法
つまりブラケット記法だと文字列を使ってプロパティにアクセスすることができるようになる。
こんなのあったなーという感想。
ドット記法の方が楽だし、ブラケット記法なんていつ使うんだろうと思ってたけど、文字列を利用しなくてはならない場合にはこっちを使うしかない。
もう少し抽象化して言うと、今回のように変数を使って動的にプロパティにアクセスしたい場合はブラケット記法を使うしかない。
他にもドット記法だとプロパティ名で数字で始まるものは使えないけど、ブラケット記法なら使えるとかもあるみたい。
ただこれはあまり使う機会はなさそう。
基本はドット記法の方が読みやすいしこっちでいいけど、それで対応できない場合はブラケット記法が有効。
色んな書き方あるけど、それぞれそれなりに意味があったりするもんだね。
Reactはだいぶ慣れてきたものの、やっぱり生のJavaScriptの記述がまだまだ課題だなと認識する今日この頃。
少しずつ慣れていこう。