react typescript错误‘类型'{ ... }’不可赋值给类型'IntrinsicAttributes & IntrinsicClassAttributes<...>
react typescript错误‘类型'{ ... }’不可赋值给类型'IntrinsicAttributes & IntrinsicClassAttributes<...>
提问于 2021-06-29 05:38:46
我刚从一个react typescript项目开始，我得到了这个隐秘的错误：
Failed to compile.
/Users/simon/Code/web/react-news-col/src/MainNewsFeed.tsx
TypeScript error in /Users/simon/Code/web/react-news-col/src/MainNewsFeed.tsx(27,35):
No overload matches this call.
Overload 1 of 2, '(props: {} | Readonly<{}>): NewsFeedItem', gave the following error.
Type '{ index: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NewsFeedItem> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
Property 'index' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<NewsFeedItem> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
Overload 2 of 2, '(props: {}, context: any): NewsFeedItem', gave the following error.
Type '{ index: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NewsFeedItem> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
Property 'index' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<NewsFeedItem> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'. TS2769
25 | newsFeedItems.push(<Row>
26 | <Col sm={12} md={6} lg={4}>
> 27 | <NewsFeedItem index={i}/>
| ^
28 | </Col>
29 | </Row>)
30 | }
Compiling...
Files successfully emitted, waiting for typecheck results...
Failed to compile.
/Users/simon/Code/web/react-news-col/src/MainNewsFeed.tsx
TypeScript error in /Users/simon/Code/web/react-news-col/src/MainNewsFeed.tsx(27,35):
Type '{ index: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NewsFeedItem> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
Property 'index' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<NewsFeedItem> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'. TS2322
25 | newsFeedItems.push(<Row>
26 | <Col sm={12} md={6} lg={4}>
> 27 | <NewsFeedItem index={i}/>
| ^
28 | </Col>
29 | </Row>)
30 | }
Compiling...代码如下：
class MainNewsFeed extends React.Component {
render() {
return (
<NewsFeedCol/>
);
}
}
class NewsFeedCol extends React.Component {
constructor(props: any) {
super(props);
}
render() {
let newsFeedItems = [];
let numOfNewsFeedItems = 5;
for(let i = 0; i<numOfNewsFeedItems; i++) {
newsFeedItems.push(
<Row>
<Col sm={12} md={6} lg={4}>
<NewsFeedItem index={i}/>
</Col>
</Row>)
}
return (
newsFeedItems
);
}
}
class NewsFeedItem extends React.Component {
constructor(props: any) {
super(props);
}
render() {
const theIndex = this.props.index
return (
<span className="newsFeedItem">
test {theIndex}
</span>
);
}
}据我所知，我不能修改prop变量，但我可以为组件添加它们，所以我不确定为什么在这里为索引设置prop时会出现只读错误。我遗漏了什么？
回答 1
Stack Overflow用户
发布于 2021-06-29 05:50:00
class NewsFeedItem extends React.Component {React.Component是一个泛型，您可以使用它来指定组件所期望的属性(和/或状态)。您还没有这样做，所以它使用默认值，即它不接受任何道具。
下面是一个定义了道具的示例：
interface NewsFeedItemProps {
index: number
}
class NewsFeedItem extends React.Component<NewsFeedItemProps> {页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68170278
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号