[英]react + typescript How to fix props type error
Development environment开发环境
・react・反应
・typescript・打字稿
・styled-components・样式化组件
Question问题
Open is passed from the parent component to the child component below. Open 是从父组件传递到下面的子组件。
<RightNav open={open}/>
The following error occurs at the child component ①.子组件①出现以下错误。 If there is someone who understands, please teach me
如果有懂的人请教教我
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.
You need to accept the open prop to your component, then pass it to the styled component您需要接受组件的 open 属性,然后将其传递给样式化组件
const RightNav = ({open}) => {
return (
<Ul open={open}>
if you notice... the type definition for your styled component requires the open
property如果您注意到...样式化组件的类型定义需要
open
属性
const Ul = styled.ul<{open: boolean}>`
-----------------------^-------------
And the parent renders this component with the open prop并且父级使用 open 属性渲染这个组件
<RightNav open={open}/>
-----------^---------
So you just need to accept that prop in your component and then pass to the Ul
styled component:)所以你只需要在你的组件中接受那个道具,然后传递给
Ul
样式的组件:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.