时间戳

首页 > 解决方案 > 没有重载匹配此调用。反应

reactjs - 没有重载匹配此调用。反应

问题描述

我正在使用侧边栏菜单代码并使用 const 值在网站中显示和隐藏侧边栏菜单。但是我在打字时遇到错误。这是我的代码：

let Navigation = () => {
  
  const [sidebar, setSidebar] = React.useState(false);
  const showSidebar = () => setSidebar(!sidebar);
}


  return( 
    
    <nav className="navbar-default navbar-static-side main-navigation" role="navigation">
     
      <div className="sidebar-collapse">
          <IconContext.Provider value={{ color: '#fff' }}>
            <Nav>
              <NavIcon to='#'>
                  <FaIcons.FaBars onClick={showSidebar} />
              </NavIcon>
            </Nav>
            <SidebarNav sidebar= {sidebar}>
              <SidebarWrap> 
                <NavIcon to='#'>
                  <AiIcons.AiOutlineClose onClick={showSidebar} />
                </NavIcon>
                <NavIcon to='#'> 
                    <img src={logo} width="70%" /> 
                </NavIcon>
                  
              </SidebarWrap>
            </SidebarNav> 
          </IconContext.Provider>
          </div>
    </nav>
  ) 


export default Navigation

但我得到了错误，

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "slot" | "style" | "title" | "children" | ... 250 more ... | "onTransitionEndCapture"> & { ...; }, "ref" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "ref" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children: Element; sidebar: boolean; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "ref" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "ref" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
      Property 'sidebar' does not exist on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "ref" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "ref" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"nav", any, {}, never, "nav">): ReactElement<StyledComponentPropsWithAs<"nav", any, {}, never, "nav">, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type '{ children: Element; sidebar: boolean; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "ref" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "ref" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
      Property 'sidebar' does not exist on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "ref" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "ref" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.  TS2769

排队 ，

 <SidebarNav sidebar= {sidebar}>

它不允许我在标签中使用侧边栏。

标签： reactjstypescript

解决方案

此错误来自您提供给侧边栏的内容与 Sibar 所期望的内容之间的类型差异。

你的 Sibar 组件是这样输入的吗

interface Props {
  sidebar: boolean;
}

const Sidebar:FC<Props> = ({sidebar}: Props) => {
  ...yourCode
}

推荐阅读