Отреагировать на создание настроек меню

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

Вы можете использовать этот пример код для выборки динамических данных по асинхронной, Await и AXIOS в AppSidebarNav ядра-интерфейсе

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 или где - нибудь.

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

Ребенок:

• Получите объект навигации, как бы вы его ни создавали, чтобы обновить меню

• Передайте объект навигации в functionFromParent, используя props (this.props.functionFromParent(this.getYourNavigationObject()))

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