Question

我正在创建一个导航栏，但在单击时无法显示 Wrapper 菜单。在 isOpen = {isOpen}

中插入 <Sidebar /> 时发生错误

错误

<块引用>

类型 '{ isOpen: boolean;切换：() => void; }' 不可分配给类型 'IntrinsicAttribute。类型“IntrinsicAttributes”上不存在属性“isOpen”。 ts(2322)

pages/Home.tsx

import React, { useState } from 'react';
...
import Navbar from '../../components/Navbar';
import Sidebar from '../../components/Sidebar';


interface SidebarProps {
  isOpen?: boolean;
}

const Home: React.FC<SidebarProps> = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
      <Sidebar isOpen={isOpen} toggle={toggle} /> <----------- ERRO
      <Navbar />
      <HomePage>
       ...
      </HomePage>

components/Sidebar/styles.tsx

import { FaTimes } from 'react-icons/fa';
import { Link as LinkScroll } from 'react-scroll';

import styled from 'styled-components';

interface SidebarProps {
  isOpen?: boolean;
}

export const SidebarContainer = styled.aside<SidebarProps>`
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #010311;
  display: grid;
  align-items: center;
  top: 0;
  left: 0;
  transition: 0.4s ease-in-out;
  opacity: ${({ isOpen }) => (isOpen ? '100%' : '0')};
  top: ${({ isOpen }) => (isOpen ? '0' : '-100%')};
`;

Answer 1

我认为在样式组件中，您应该通过以下方式访问布尔值 isOpen：

不透明度：${props => props.isOpen ? “100%”：“0”}

类型“IntrinsicAttributes”上不存在属性“isOpen”。 ts(2322)

1 个答案: