Question

开发环境
・反应
・打字稿
・样式组件

问题
Open从父组件传递到下面的子组件。

<RightNav open={open}/>

子组件①发生以下错误。如果有人了解，请教我

import React from 'react'
import styled from 'styled-components';

const Ul = styled.ul<{open: boolean}>`
  list-style: none;
  display: flex;
  flex-flow: row nowrap;

  li {
    padding: 18px 10px;
  }

  @media (max-width: 768px) {
    flex-flow: column nowrap;
    background-color: #0D2538;
    position: fixed;
    transform: ${({ open }) => open ? 'translateX(0)' : 'translateX()100%'};
    top: 0;
    right: 0;
    height: 100vh;
    width: 300px;
    padding-top: 3.5rem;

    li {
      color: #fff;
    }
  }
`
const RightNav = () => {
  return (
   // ①　Ul in error
    <Ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Contact Us</li>
      <li>Sign Up</li>
      <li>Sign In</li>
    </Ul>
  )
}

export default RightNav

  ①  [ts] Property 'open' is missing in type '{ children: Element[]; }' but required in type 'Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 247 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }, "slot" | ... 255 more ... | "open"> & Partial<...>, "sl...'. [2741]
    RightNav.tsx(4, 23): 'open' is declared here.

Answer 1

您需要接受对组件的打开属性，然后将其传递给样式化的组件

const RightNav = ({open}) => {
  return (
    <Ul open={open}>

如果您发现...样式组件的类型定义需要open属性

const Ul = styled.ul<{open: boolean}>`
-----------------------^-------------

父级使用打开的道具渲染该组件

<RightNav open={open}/>
-----------^---------

因此，您只需要在组件中接受该道具，然后传递给Ul样式的组件：）

react + typescript如何解决道具类型错误

1 个答案: