React + typescript Как исправить ошибку типа реквизита

Question 1

Среда разработки
・ Реагировать
・ Машинописный текст
・ Стилизованные компоненты

Вопрос
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.

reactjs typescript styled-components

0

aahhuhuhu 23 Июн 2020 в 22:10

Answer

Вам нужно принять открытую опору для вашего компонента, а затем передать ее стилизованному компоненту.

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

Если вы заметили ... для определения типа вашего стилизованного компонента требуется свойство open

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

И родитель визуализирует этот компонент с помощью open prop

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

Так что вам просто нужно принять эту опору в своем компоненте, а затем перейти к компоненту в стиле Ul :)

1

John Ruddell 23 Июн 2020 в 19:12

Question 2

Вам нужно принять открытую опору для вашего компонента, а затем передать ее стилизованному компоненту.

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

Если вы заметили ... для определения типа вашего стилизованного компонента требуется свойство open

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

И родитель визуализирует этот компонент с помощью open prop

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

Так что вам просто нужно принять эту опору в своем компоненте, а затем перейти к компоненту в стиле Ul :)

1

John Ruddell 23 Июн 2020 в 19:12

React + typescript Как исправить ошибку типа реквизита

1 ответ

Похожие вопросы

Новые вопросы

reactjs