2

Semantic UI Reactを使用して、マルチレベル メニュー コンポーネントまたはネストされたメニューを作成しようとしています。

以下のような静的メニュー コンポーネントを作成できました。

 <Menu>
    <Menu.Item>
        <Dropdown text='MCU' pointing className='link item'>
            <Dropdown.Menu>
                <Dropdown.Item>                      
                </Dropdown.Item>
                <Dropdown.Item>                       
                </Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    </Menu.Item>
    <Menu.Item>           
    </Menu.Item>        
    <Menu.Item>
        Dropdown Menu
    </Menu.Item>
</Menu>

ここで出力を確認してください

以下のようなそのメニューの動的コンポーネントを作成しようとしていました-

export class RecursiveMenu extends Component {
render() {
    const { children, textToShow } = this.props;
    return (
        <Dropdown key={children.wbMenuId} text={textToShow} pointing={children.childMenu ? true : false} className='link item'>
            <Dropdown.Menu>
                {
                    children.map(child => <Dropdown.Item>{child.userMenuName}</Dropdown.Item>)
                }
            </Dropdown.Menu>
        </Dropdown>
    );
}

}

しかし、正しく表示されません。これはサンプルデータです。

4

2 に答える 2

-4

ドロップダウンのoptionsプロップを使用して、ドロップダウン項目を自分で作成する代わりに渡すことができます。

セマンティック UI ドキュメントの例を次に示します。

https://react.semantic-ui.com/modules/dropdown#dropdown-example-item-content

于 2018-02-24T02:01:34.660 に答える