Реагировать на динамическое меню из базы данных

Question

, поэтому я пытался создать динамическое меню в среде .net core + реагировать. Проблема, с которой я столкнулся, заключается в основном в этом сообщении об ошибке

Type '{}' is not assignable to type
'Readonly<RouteComponentProps<{}>>'.
    Property 'match' is missing in type '{}'

Вот код для Layout.tsx

import * as React from 'react';
import { NavMenu } from './NavMenu';

export interface LayoutProps {
    children?: React.ReactNode;
}

export class Layout extends React.Component<LayoutProps, NavMenu> {
    public render() {
        return <div className='container-fluid'>
            <div className='row'>
                <div className='col-sm-3'>
                    <NavMenu />
                </div>
                <div className='col-sm-9'>
                    { this.props.children }
                </div>
            </div>
        </div>;
    }
}

другой файл NavMenu.tsx

import * as React from 'react';
import { Link, NavLink } from 'react-router-dom';
import { RouteComponentProps } from 'react-router';
import * as ReactDOM from 'react-dom';

interface navMenuItems {
    menuItemsList: NavMenuPages[];
    loading: boolean;
}


export class NavMenu extends React.Component<RouteComponentProps<{}>, navMenuItems> {
    constructor() {
        super();
        this.state = { menuItemsList: [], loading: true };

        fetch('api/Menu')
            .then(response => response.json() as Promise<NavMenuPages[]>)
            .then(data => {
                this.setState({ menuItemsList: data, loading: false });
            });
    }

    public render() {
        this.renderMenu(this.state.menuItemsList);

        return <div></div>;
    }

    public renderMenu(menuItemsList: NavMenuPages[]) {
        return <div className='main-nav'>
            <div className='navbar navbar-inverse'>
                <div className='navbar-header'>
                    <button type='button' className='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
                        <span className='sr-only'>Toggle navigation</span>
                        <span className='icon-bar'></span>
                        <span className='icon-bar'></span>
                        <span className='icon-bar'></span>
                    </button>
                    <Link className='navbar-brand' to={'/'}>ReactCrudDemo</Link>
                </div>
                <div className='clearfix'></div>
                <div className='navbar-collapse collapse'>
                    <ul className='nav navbar-nav'>
                        {menuItemsList.map(mil =>
                            <li>
                                <NavLink to={`${mil.toLink}`} exact activeClassName='active'>
                                    <span className='glyphicon glyphicon-home'></span> {mil.name}
                                </NavLink>
                            </li>
                        )}
                    </ul>
                </div>
            </div>
        </div>;
    }
}  

export class NavMenuPages{
    name: string = "";
    toLink: string = "";
    isShown: boolean = true;
}    

Остальные файлы такие же, как в этом руководстве: https://www.c -sharpcorner.com / article / asp-net-core-падла-с-reactjs-и-сущность-каркасное ядро ​​/

Answer 1

Вы объявляете NavMenu как требующий RouteComponentProps<{}>, который он обычно получал бы автоматически, если вы вызываете его через <Route>, но вы вызываете его напрямую, не передавая необходимые реквизиты.Поскольку NavMenu не использует ни одного из RouteComponentProps, вы можете просто изменить тип реквизита.Заменить:

export class NavMenu extends React.Component<RouteComponentProps<{}>, navMenuItems>

на:

export class NavMenu extends React.Component<{}, navMenuItems>