Question

我有侧栏导航，可以获得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() 更新列表？我该如何应对这项任务

Answer 1

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

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

Answer 2

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

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: '/'
        }
    ]
}

在最后一部分中，调用 DefaultLayout 中或任何位置的 SidebarNav 组件。

Answer 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...
        }
    }
}

孩子：

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

使用道具（this.props.functionFromParent(this.getYourNavigationObject())）将导航对象传递给functionFromParent

/** 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 ...
}

通过设置创建动态菜单

3 个答案: