当我尝试在我的功能组件中使用来自 props 对象的匹配参数时，为什么它会失败？答案

【问题标题】：Why it fails when I try to use match parameter from props object in my functional component?当我尝试在我的功能组件中使用来自 props 对象的匹配参数时，为什么它会失败？
【发布时间】：2021-02-06 19:05:07
【问题描述】：

当我使用 props.match.url 时，它可以正常工作。

import {withTranslation} from 'react-i18next';

function Navbar ({props}) {
    return (
        <nav className={css.navbar}>
            <NavLink exact to={`${props.match.url}`} className={css.link} activeClassName={css.linkActive}>
                Calls receive scenario
            </NavLink>
            <NavLink to={`${props.match.url}/call-tracking`} className={css.link} activeClassName={css.linkActive}>
                Tracked numbers
            </NavLink>
            <NavLink to={`${props.match.url}/greetings`} className={css.link} activeClassName={css.linkActive}>
                Greetings
            </NavLink>
            <NavLink to={`${props.match.url}/sip`} className={css.link} activeClassName={css.linkActive}>
                Sip accounts
            </NavLink>
        </nav>);
}

export default withTranslation()(Navbar);

但是当我添加流类型检查时（我几乎完全确定我做对了），它会记录错误。

import {withTranslation} from 'react-i18next';

type Props = {
    t: Function,
    match: {
        url: string
    }
}

function Navbar({t, match}: Props) {
    return (
        <nav className={css.navbar}>
            <NavLink exact to={`${match.url}`} className={css.link} activeClassName={css.linkActive}>
                {t('settings.page_vats.page_scenario.navbar_title')}
            </NavLink>
            <NavLink to={`${match.url}/call-tracking`} className={css.link} activeClassName={css.linkActive}>
                Tracked numbers
            </NavLink>
            <NavLink to={`${match.url}/greetings`} className={css.link} activeClassName={css.linkActive}>
                Greetings
            </NavLink>
            <NavLink to={`${match.url}/sip`} className={css.link} activeClassName={css.linkActive}>
                Sip accounts
            </NavLink>
        </nav>);
}

export default withTranslation()(Navbar);

错误看起来是这样的：

Uncaught RuntimeTypeError: Props.match must be an object

Expected: {
  url: string;
}

Actual Value: undefined

Actual Type: void

【问题讨论】：

标签： javascript reactjs typescript flowtype

【解决方案1】：

显然，我从父组件传递了所有道具。

function ParentComponent (props) {
    return (
        <>
            <Navbar props={props} />
            <Routes props={props} />
        </>
    );
}

我想以同样的方式命名道具不是一个好习惯。

所以我做了一点改动，更容易弄清楚如何从传入的 props 对象接收必要的属性。

function ParentComponent (props) {
    return (
        <>
            <Navbar parentComponent={props} />
            <Routes parentComponent={props} />
        </>
    );
}

【讨论】：