[英]Typescript React/Nextjs styled-components - passing function as prop to component throws error on missing type
[英]Typescript React/ styled-components - passing function as prop to component throws error on missing type
我收到过载匹配错误,但我不明白,因为昨天没有收到此错误,当我尝试在另一个组件或订单页面中添加另一个 onClick function 时也会发生此错误
代码;
import React, { MouseEventHandler } from 'react'
import { Container, Image } from './styles'
interface ImageFullscreen {
path?: string
shown: boolean
close: MouseEventHandler
}
const ImageFullscreen: React.FC<ImageFullscreen> = ({
path = 'https://via.placeholder.com/1920x1080?text=Imagem+Placeholder+Das+Postagens',
close,
shown,
}) => {
const handleMapViewClose: MouseEventHandler<HTMLDivElement> = e => {
const source = (e.target as HTMLDivElement & HTMLImageElement).src
if (source === undefined) {
close(e)
}
}
return (
<Container display={shown} onClick={handleMapViewClose}>
<Image src={path} alt='ImageFullscreen' />
</Container>
)
}
export default ImageFullscreen
容器代码
import styled from 'styled-components'
import { fadeIn } from 'styles/keyframes'
interface Container {
display: boolean
}
export const Container = styled.div<Container>`
position: fixed;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
z-index: 1000;
display: ${props => (props.display ? 'flex' : 'none')};
align-items: center;
justify-content: center;
padding: 50px;
animation: ${fadeIn} 500ms 1;
`
export const Image = styled.img`
max-height: 100%;
max-width: 100%;
min-height: 600px;
`
我认为您的界面名称有问题,它与您的组件相同,也许您可以更改名称并且它会起作用。
像这样的东西:
interface IContainer {
display: boolean
}
export const Container = styled.div<IContainer>`...`
卢卡斯,如果你尝试
const handleMapViewClose = ( e : React.MouseEvent<HTMLDivElement> ) => {
const source = (e.target as HTMLDivElement & HTMLImageElement).src
if (source === undefined) {
close(e)
}
}
它有效吗?
我认为您可能拼错了事件接口名称?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.