-1

我正在将 TypeScript 与 React 一起使用，当我运行 tsc/jest 测试时，它会返回与此类似的所有组件的错误：

Property 'prop name' does not exist on type '{ children?: ReactNode; }'.

文件夹/组件结构：

– ExampleComponent
  - component.tsx
  - index.ts 
  - styles.css 
  - styles.css.d.ts

组件.tsx

import React from 'react';
import { Text } from 'designlibrary';
import styles from './styles.css';

export interface TypeExports {
  title: string;
  text: string;
}

export const Blurb: React.FunctionComponent = (props: TypeExports) => (
  <div className={styles.blurb}>
    <Text color='primary' size='h3' type='h3'>
      {props.title}
    </Text>
    <Text color='primary' size='p1' type='p'>
      {props.text}
    </Text>
  </div>
);

索引.ts

export { Blurb } from './component';

样式.css.d.ts

interface CssExports {
  blurb: string;
}
declare var cssExports: CssExports;
export = cssExports;

我在导出类时遇到了类似的错误，并且由于我将上述内容添加到.style.css.d.ts文件中，它解决了所有与 css 相关的打字稿错误。

上面的组件仍然返回的错误示例是：

Property 'text' does not exist on type '{ children?: ReactNode; }'.

编辑：

在 Nicholas 的帮助下，这是工作组件的结构：

export interface TypeExports {
  title: string;
  text: string;
}

export const Blurb: React.FunctionComponent<TypeExports> = (props) => 
  <div className={styles.blurb}>
    <Text color='primary' size='h3' type='h3'>
      {props.title}
    </Text>
    <Text color='primary' size='p1' type='p'>
      {props.text}
    </Text>
  </div>
4

1 回答 1

2

React.FunctionComponent 是一个通用的. 你可以告诉它你的道具是什么，它会相应地调整它的类型。既然你还没有告诉它道具是什么，它就认为没有道具。改为这样做：

// I'd probably name this interface "BlurbProps", but that's up to you
export interface TypeExports {
  title: string;
  text: string;
}

export const Blurb: React.FunctionComponent<TypeExports> = (props) => {
  // etc
}

我省略了 on 的类型(props)，因为它现在可以被推断出来。如果您愿意，欢迎您重新迭代类型并将其保留为(props: TypeExports)，但重要的是在<TypeExports>之后添加React.FunctionComponent

于 2019-07-29T20:12:01.960 回答