反应打字稿错误 'Type '{ ... }' 不可分配到类型 'IntrinsicAttributes & IntrinsicClassAttributes<...>

如何解决反应打字稿错误 'Type '{ ... }' 不可分配到类型 'IntrinsicAttributes & IntrinsicClassAttributes<...>

我刚开始使用 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>
        );
    }
}

据我所知，我无法修改道具变量，但我可以为组件添加它们，所以我不确定为什么当我尝试在此处为索引设置道具时出现只读错误。我错过了什么？

解决方法

class NewsFeedItem extends React.Component {

React.Component 是一个泛型，你可以用它来指定组件期望的道具（和/或状态）。你还没有这样做，所以它使用默认值，即它不接受任何道具。

这是一个定义了 props 的例子：

interface NewsFeedItemProps {
  index: number
}

class NewsFeedItem extends React.Component<NewsFeedItemProps> {