Question

所以我一直在尝试在.net core + react环境中创建动态菜单我一直面临的问题基本上是此错误消息

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-crud-with-reactjs-and-entity-framework-core/

Answer 1

您要声明NavMenu要求RouteComponentProps<{}>，如果您通过<Route>调用它，通常会自动收到它，但是直接调用它却没有传递必需的道具。由于NavMenu不使用任何RouteComponentProps，因此您只需更改道具类型即可。替换：

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

具有：

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

从数据库反应动态菜单

1 个答案: