React + Typescript-有条件渲染组件时定义组件道具

Question

鉴于以下情况：

{ this.props.userName && <UserProfile userName={this.props.userName} />

和UserProfile中的

interface UserProfileProps {
  userName: string;
}

class UserProfile extends React.Component<UserProfileProps>

问题的第一行给我错误：

[ts] Type 'null' is not assignable to type 'string'.

我的问题是：是否有一种方法可以让Typescript知道如果prop为null，则组件将不会呈现？因此，不必让我将其类型定义为string | null，因为它永远不会用null调用。

Answer 1

是的！通过使用!后缀运算符解释了here：

{ this.props.userName && <UserProfile userName={this.props.userName!} />}