1

我在我的反应项目中使用 coreui，更具体地说 - appSideBarNav，我用它来表示文件夹。问题是文件夹可以嵌套，当文件夹（让它成为 A）有一个子文件夹（B）时，A 文件夹将成为 nav-dropdown。当您单击 A 文件夹时，您必须被重定向到 url/A，但 Dropdown 元素会被切换并且不会发生重定向。换句话说 - 您只能被没有任何子级的文件夹重定向。值得注意的是，所有文件夹都具有正确的 url 属性。另外，我将onClick函数传递给每个文件夹，以查看列表中单击后是否已触发，并且只有没有子文件夹的文件夹被单击后才触发onClick函数。

下面的代码示例表示使用文件夹填充 appSideBarNav 的递归函数：

        const addFoldersToNav = (folders, sourceURL = '/mail/') => {
            return (folders.map(item => {

                console.log('creating and adding folder')
                const folder = {
                    name: (item.Type == 10) ? item.Name : i18next.t(item.Name.toLowerCase() + '_folder'),
                    url: sourceURL + item.Name,
                    icon: folderTypes.get('' + item.Type),
                    // onClick: (console.log('wow')),
                    attributes: {
                        onClick: event => {
                            console.log('clicked')
                            event.nativeEvent.stopImmediatePropagation()
                            window.location = "#" + sourceURL + item.Name;
                            localStorage.setItem('Path', sourceURL + ':folderId/:selectedId?')
                        },
                        onToggle: () => { console.log('toggled') },
                    },
                    wrapper: {
                        element: <input onClick={console.log('wrapped')} />
                    },
                    notSeenAmount: 0,
                    id: inc++,
                    children: (item.SubFolders) ? addFoldersToNav(item.SubFolders['@Collection'], sourceURL + item.Name + '/') : null,
                }
                return folder
            }))
        }
4

1 回答 1

-1

看看这里https://github.com/coreui/coreui-react/blob/master/src/SidebarNav.md#navconfig-shape

要覆盖 nav-dropdown 切换的默认行为并导航到 url，请使用自定义 onClick 方法：

{ name: 'Base', url: '/base', icon: 'icon-puzzle', attributes: {onClick: (e, item)=>{ console.log(e, item) }}, // (v2 .5.6 up) 可选子项：[] }

这有助于解决我的问题，这与您的问题完全相同

于 2020-05-22T11:29:33.910 回答