反应创建动态菜单栏设置答案

【问题标题】：react create dyamic menu by settings反应创建动态菜单栏设置
【发布时间】：2018-05-05 09:27:23
【问题描述】：

我有获取 json 列表的侧边栏导航

import {
  AppSidebarNav,
} from '@coreui/react';
<AppSidebarNav  navConfig={navigation} {...this.props} />

数据是项目列表

export default {
    items: [
      {
        name: 'Dashboard',
        url: '/dashboard',
        icon: 'icon-speedometer',
      },
      {
        name: 'Profile',
        url: '/profile',
        icon: 'icon-speedometer',
      },...
  ],
  };

如何在项目加载到侧边栏之前设置项目列表？有什么方法可以使用componentDidMount() 更新列表？我应该如何完成这项任务

【问题讨论】：

标签： javascript reactjs core-ui

【解决方案1】：

将项目列表放在自己的文件中，例如 nav.js。然后将此行添加到您的导入中

    import navigation from "./nav"; // or whatever relative path nav.js is in.

【讨论】：

【解决方案2】：

您可以使用此示例代码通过 AppSidebarNav core-ui 中的 async、await 和 axios 获取动态数据强>

import React, {Component, Suspense} from "react";
import {
    AppSidebarNav,
    AppSidebar,
    AppSidebarFooter,
    AppSidebarForm,
    AppSidebarHeader,
    AppSidebarMinimizer,
} from "@coreui/react";
import axios from "axios";
import navigation from "../../_nav";

class SidebarNav extends Component {

    constructor(props) {
        super(props);
        this.state = {
            navData: null,
        };
    }

    async getData() {
        let res = await axios.get('REQUEST_URL');
        this.setState({ navData: {items : res });
        // OR // return await {items : res};
    };

    componentDidMount() {
        if (!this.state.navData) {
            (async () => {
                try {                 
                    await this.getData();
                    // OR // this.setState({navData: await this.getData()});
                } catch (e) {
                    //...handle the error...
                    console.log(e);
                }
            })();
        }
    }


    render() {
        return (
        <AppSidebar fixed display="lg">
            <AppSidebarHeader />
            <AppSidebarForm />
            <Suspense>
                <AppSidebarNav navConfig={(this.state.navData === null) ? navigation : this.state.navData} {...this.props} />
            </Suspense>
            <AppSidebarFooter />
            <AppSidebarMinimizer />
        </AppSidebar>
        )
    }
}

export default SidebarNav;
}

navigation 变量可用于默认数据或加载...

export default {
    items: [
        {
            name: 'Loading... ',
            url: '/'
        }
    ]
}

在最后一部分调用 SidebarNav 组件在 DefaultLayout 或任何地方。

【讨论】：

你好，@ShahRokh 是 React 的新手。我在 Core UI 版本 2.1.2 中添加了动态菜单和子菜单。现在我如何在悬停时显示菜单的子菜单？ AppSideBarNav 有没有自动显示子菜单而不是点击菜单的道具？

【解决方案3】：

老问题，但对于任何想知道如何做到这一点的人，我通过执行以下操作向前推进：

家长：

设置构造函数并添加 currentNavigation 属性
默认导航的默认新道具
更改 AppSidebarNav 以使用新道具
在父级中创建一个接受导航对象的函数，并更新新的 currentNavigation 属性

在此示例中，我将导航对象添加到新对象中名为 index 的属性中，这似乎是 CoreUI 导航所必需的，但是，您可以在子组件中/在创建导航对象时执行此操作您将用于更新菜单。

/** Parent **/

import navigation from "../../navigation/_nav"

class DefaultLayout extends Component {

    constructor(props) {
       super(props)
       this.currentNavigation = navigation //Set to default navigation from file
    }    

    functionFromParent = (yourNavObject) => {    
        // nav contains the navigation object (build this however you do), 
        // but needs to be added to { items: ... }

        let data = {
          items: yourNavObject
        }
        this.currentNavigation = data;

    }

    render = () => {
        return(
            // ...More code

            <AppSidebarNav
              navConfig={this.currentNavigation} //Added function that child fires to prop
              {...this.props}
              router={router}
            />

           // More code...
        }
    }
}

孩子：

获取导航对象，但您生成它以更新菜单

使用 props (this.props.functionFromParent(this.getYourNavigationObject())) 将导航对象传递给函数FromParent

/** Child **/
class ChildComponent extends Component {
    // ... More Code

    componentDidMount = () => {    
       let navigation = this.getYourNavigationObject() //Get your navigation object however you do       
       this.props.functionFromParent(navigation)
    }

    // More Code ...
}

【讨论】：