![](/img/trans.png)
[英]Element implicitly has an 'any' type because expression of type 'string' can't be used to index type React Typescript
[英]TypeScript Err: "Element implicitly has an 'any' type because expression of type 'any' can't be used to index type
[你好!][1]
我收到这个 TypeScript 错误 {“元素隐式具有 'any' 类型,因为类型 'any' 的表达式不能用于索引类型'{ 0: { image: string; title: string; text: string; } ; 1: { 图像: 字符串; 标题: 字符串; 文本: 字符串; }; 2: { 图像: 字符串; 标题: 字符串; 文本: 字符串; }; }'.", }。 TS7053
不确定我的接口需要添加到哪里或者是否需要添加?
这是突出显示setCurrent(carouselData[event.target.getAttribute("data-Testimonials")])
将它们更改为什么。 我不知道我哪里出错了,因为我只写了一个月的代码。
我的轮播代码:
interface CarouselCardProperties {
image: string;
title: string;
text: string;
}
export default function Testimonials() {
const carouselData = {
0: {
image: tobi,
title: "I no longer have to howl at the moon to call for my lady !!",
text: "Tobi ~ Vancouver, Canada",
},
1: {
image: girly,
title: "With Enrico going on dates, we have more time to ourselves!",
text: " Gina ~ Rome, Italy",
},
2: {
image: loveshades,
title: "I no longer have to worry about staying clean, I kitties licking me every night. I have Love Shades on.",
text: " Princess ~ Georgia, USA",
},
};
const [current, setCurrent] = useState(carouselData[0])
const [active, setActive] = useState(0)
const handleSetClick = (event:any) => {
setCurrent(carouselData[event.target.getAttribute("data-Testimonials")])
setActive(event.target.getAttribute("data-Testimonials"))
};
return (
<Container>
<Img src={current.image} />
<Title>{current.title}</Title>
<Text>{current.text}</Text>
<div>
{Object.keys(carouselData).map(index => (
<Span
onClick={(event:any) => handleSetClick(event)}
data-Testimonials={index}
key={index} />
))}
</div>
</Container>
)
}```
[1]: https://i.stack.imgur.com/A9CwZ.png
为什么需要data-Testimonials
属性?
只需将索引直接传递给handleSetClick
:
const handleSetClick = (index: keyof typeof carouselData) => {
setCurrent(carouselData[index])
setActive(index)
};
return (
<Container>
<Img src={current.image} />
<Title>{current.title}</Title>
<Text>{current.text}</Text>
<div>
{Object.keys(carouselData).map(index => (
<Span
onClick={() => handleSetClick(index)}
key={index} />
))}
</div>
</Container>
)
编码
const carouselData = {
0: {
// ...
}
}
定义carouselData
数据以使用数字索引,但您使用event.target.getAttribute("data-Testimonials")
对其进行索引,它隐式具有任何类型。 我会强烈键入您的event
参数,因此event.target.getAttribute("data-Testimonials")
具有字符串类型。 然后我会重新定义carouselData
以使用字符串索引,如下所示:
const carouselData = {
'0': {
// ...
},
'1': {
// ...
}
}
通常最好尽可能避免any
类型,以避免这些情况。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.