円形/扇形メニューを2分で実装する方法を教えます（基本バージョン）

@centerIconサイズ: 30px;

.flex(@justify: flex-start, @align: center) {
    コンテンツの正当化: @justify;
    項目の位置を揃える: @align;
    ディスプレイ: フレックス;
}
.sector-menu-wrapper {
    位置: 相対的;
    幅: @centerIconSize;
    マージン: 自動;

    .center-icon {
        .flex(中央);
        幅: @centerIconSize;
        高さ: @centerIconSize;
        境界線の半径: 50%;
        背景: rgba(0, 0, 0, 0.3);
        色: 白;
        カーソル: ポインタ;
    }

    .セクター項目{
        位置: 絶対;
        .flex(中央);
        幅: @centerIconSize;
        高さ: @centerIconSize;
        境界線の半径: 50%;
        背景: rgba(0, 0, 0, 0.3);
        カーソル: ポインタ;
        色: 白;
        上: 0;
        左: 0;
        遷移: すべて線形 0.5 秒。
        変換: translate(0, 0);
        // 表示: なし;
        可視性: 非表示;
    }

    .セクターリスト{
        &.セクターリストアクティブ{
            遷移: すべて線形 0.5 秒。
            .セクター項目{
                .flex(中央);
                遷移: すべて線形 0.5 秒。
                変換: translate(0, 0);
                可視性: 可視;

                &:最初の子 {
                    変換: translate(0, -@centerIconSize * 1.5);
                }
        
                &:n番目の子(2) {
                    変換: translate(-@centerIconSize * 1.5, 0);
                }
        
                &:n番目の子(3) {
                    変換: translate(0, @centerIconSize * 1.5);
                    
                }
            }
        }
    }
}

'react' から React をインポートします。

エクスポートデフォルトクラスSectorMenuはReact.Componentを拡張します{
    状態 = {
        方向: '左'、
        セクターメニュー表示: false、
        センターアイコンサイズ: 30,
        セクターアイテムサイズ: 30,
    }

    /**
     * ラジアルメニューを表示 */
    セクターメニューを表示 = () => {
        const { セクターメニュー表示 } = this.state;
        this.setState({
            セクターメニュー表示: !セクターメニュー表示,
        })
    }

    onClickSectorMenuItem = (インデックス) => {
        const { セクターメニュー項目関数 } = this.props;
        if (!sectorMenuItemFunctions || typeof(sectorMenuItemFunctions[index]) !== 'function') {
            戻る;
        }
        セクターメニュー項目関数[インデックス]();
    }

    getSectorJsx = () => {
        const { セクターメニュー項目 } = this.props;

        if (!sectorMenuItems || !Array.isArray(sectorMenuItems) || sectorMenuItems.length === 0) {
            戻る;
        }

        const スタイル = {};
        const { セクターメニュー表示 } = this.state;

        セクターメニューアイテム.map((item, i) => { を返す
            // 定数スタイル = {
            // 変換: translate(0, -centerIconSize * 2);
            // };

            戻り値 (<div
                className={`sector-item ${sectorMenuVisible && 'sector-item-active'}`}
                スタイル={スタイル}
                onClick={() => this.onClickSectorMenuItem(i)}
                キー={i}
            >
                {アイテム}
            </div>)
        });
    }
    与える（） {
        const { セクターメニュー表示 } = this.state;
        戻る （
            <div className="セクターメニューラッパー">
                <div className="center-icon" onClick={this.showSectorMenu}>
                    {
                        セクターメニュー表示? 'x' : '···'
                    }
                </div>
                <div className={`sector-list ${sectorMenuVisible && 'sector-list-active'}`}>
                    セクションJsxの取得
                </div>
            </div>
        ）
    }
}

<セクターメニュー
    セクターメニュー項目={['A1', 'A2', 'A3']}
    セクターメニュー項目関数={[関数() {console.log(0)}, 関数() {console.log(1)}, 関数() {console.log(2)}]}
/>