困ったときの読者頼み react-bootstrap/Dropdown編

コーディングで困っていることがあって、そういやこのブログの読者に何人か僕よりできそうなプログラマがいそうだな、と思って書いてみる。現場の人間に質問したんだけど簡単に解決できそうな方法はパッと出てこなさそうで、それ以上は僕の仕事放棄につながっちゃうのでどうにもならんのだ。

■やりたいこと

シンプルにこれなんだな。

Bootstrap3のドロップダウンを多階層にする方法

この記事はver3だけど仕事で導入しているver5でも同じことができる。じゃあ解決じゃんって思うかもしれんが、Bootstarp5のレガシーはreact/typscriptと相性が悪くて、特に<a href="#">に依存しているデザインがダメ。最近のちゃんとした書き方のお作法だと、href内にはURLを入れないとESlintが怒ってくる。つまりこの記事の方法をコピペするだけで解決できない。

Bootstrap側も理解しているのか、react-bootstrapというソリューションがあるが、これまた中途半端な感じでかゆいところに手が届かない。もしかしたら読者の中に簡単にできる方法を知ってるかもしれないということで書いてみた。

■react-bootstrapでダメだったコード

とりあえずドロップダウンは用意されているけど、多重構造に対応していない。

import React from 'react';
import { Dropdown, NavDropdown } from 'react-bootstrap';

export default function View() {
    return (
        <div className="mt-2">
            <NavDropdown title="TEST">
                <Dropdown drop="end">
                    <Dropdown.Toggle variant="Light">
                        HOGE
                        <Dropdown.Menu>
                            <Dropdown.Item href="/test/hoge/user">User</Dropdown.Item>
                            {/* todo 多重構造はうまくいなかい*/}
                            <Dropdown.Toggle variant="Light">
                                HOGE2
                                <Dropdown.Menu>
                                    <Dropdown.Item href="/test/hoge2/admin">
                                        Admin
                                    </Dropdown.Item>
                                </Dropdown.Menu>
                            </Dropdown.Toggle>
                        </Dropdown.Menu>
                    </Dropdown.Toggle>
                </Dropdown>
            </NavDropdown>
        </div>
    );
}