reactjs - TypeScript 属性“道具”不存在

Question

我有这个.tsx文件：

import React, { Component } from 'react';

export class SidebarItem extends Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (<li>{this.props.children}</li>);
  }
}

但是，TypeScript 会抛出此错误：

error TS2339: Property 'props' does not exist on type 'SidebarItem'.

Answer 1

解决方案是安装 React Types 定义

yarn add -DE @types/react

来自typescript docs和types repo的更多详细信息

在旁注中，我必须重新启动 vscode 才能正确启动 linting。

Answer 2

TypeScript 遵循 ES 模块规范，而 React 遵循 CommonJS。 这篇文章主要涉及到这一点。

像这样导入 React 将解决这个问题：

import * as React from 'react';

export class SidebarItem extends React.Component {
    constructor (props) {
        super(props);
    }

    render () {
        return (<li>{this.props.children}</li>);
    }
}

Answer 3

您可以尝试以下编写 React Comp 的方式。

interface SidebarItemProps
{
    children: any
} 

class SidebarItem extends React.Component<SidebarItemProps, any> { 
    //your class methods 
}

更多关于在 TypeScript 中使用 React

Answer 4

如果您的组件没有状态，则根本不必使用类。您还可以使用对此问题的回答的无状态反应组件 (SFC) 。

const MyStatelessComponent : React.StatelessComponent<{}> = props =>
    <li>{props.children}</li>;

或者，如果您的标记变得巨大：

const MyStatelessComponent : React.StatelessComponent<{}> = props => {

    return <li>{props.children}</li>;

}