javascript - React Native <{}> 语法

Question

我使用 react-native init 创建了一个新的 React Native 项目在生成的模板中，主要组件类如下所示:

export default class App extends Component<{}> {
   ...
}

我不太明白 <{}> 是什么意思部分的意思。我以前从未见过这个，所有的例子似乎都忽略了它。只是好奇它的目的是什么以及是否有必要。

Answer 1

当您使用 typescript 时，您必须指定预期值的类型。这允许在编译时检测不匹配的属性并减少错误数量。

所以当你这样做时Component<{}> , {}是 Props 的类型，您的组件将收到。

这就是 React 的 Component 的方式类看起来像:

如果你注意到的话，类型是 <P, S> ，代表<Props, State> .

<小时/>

还有一个接口(interface)叫 ComponentClass有签名 <P> ,

它在内部初始化一个新组件，状态为 any 。该接口(interface)用于ReactElement's type :

总而言之，您正在定义一个不接受任何 Prop 但可以具有任何类型状态的组件。当您不确定组件的交互时，通常会执行此操作。

理想情况下，组件应如下所示:

interface IComponentState {
  ...
}

interface IComponentProps {
  ...
}

export class MyComponent<IComponentProps, IComponentState> extends React.Component {
  ...
}

这强制消费者传递任何必要的属性，并强制您拥有正确的状态值。