react 特定のノードの取得

Question

componentDidMount = () => {
  console.log(this.ul.childNodes);
}
<ul ref={(ul) => this.ul = ul}>
  <li>
    <div>
     //ここから
     <div></div>
     <div></div>
     <div></div>
     //ここまで
    </div>
  </li>
</ul>

console.logの部分で上記のdivの部分の数を数えたいのですが、
どう書けば取れますでしょうか？
jqueryばっかやってたもので・・・

//jqueryの場合
$("li > div").find("div").length;
これがjsだとどうなる感じでしょうか？

Comments

[og24715]

その div 要素って state や props に応じて動的に増減するんですか？

[cheche0830]

ありがとうございます！いえ！直でかかれたものなんです！手動で増減するので自動でカウントできればと思いまして。

[og24715]

うーん。何がしたいのかわかりませんが React の思想とかけ離れていそうですね。目的を明確にしていただければ React らしいより良い方法を回答できるかもしれませんね。

[cheche0830]

なるほどですね。。どうもjqueryしかやってなかったので、できあがったdomをどうにかしようという思想が抜けず・・・ちょっと構造から見直してみたいと思います。

Answer 1

this.ul.getElementsByTagName('div').length;

で取得できると思いますがいかがでしょうか。

Comments

[cheche0830]

ありがとうございます。その場合li直下のdivの数（1個）しか取れない模様です・・・

[kde]

左様でしたか、失礼しました。こちらはいかがでしょうか？
React内で試せていないですが、同じ構成のhtmlに対しては正常に動作しています
```
const target = this.ul.querySelector('li > div');
console.log(target.getElementsByTagName('div').length);
```

[cheche0830]

実際には li > div が他の場所にもありまして、、
this.ul.querySelector('li.test > div');
こんな感じでクラスで絞ったりは出来るものなんでしょうか？

[kde]

はい、querySelectorとかquerySelectorAllはjqueryみたいに要素を取得できるので、その書き方で絞れます

[cheche0830]

ありがとうございます！！では他のエラーですね。。ちょっと確認してみます！！！