Question

我的目的是在有数据时显示组件。

父组件定期从API提取数据并存储在状态中。然后将其作为“数据”属性传递给子组件。

如果在构造器阶段处于状态中定义了有效类型的占位符，则效果很好。

但是当无法包含有效类型的占位符时，我遇到了问题。

如果我在渲染器中包含以下内容，仍然会遇到类型错误。

{typeof this.state.tracker !== 'undefined' ? <Tracker data={this.state.tracker} /> : ''}

TypeScript错误：键入'TrackerInterface |未定义”无法分配给“ TrackerInterface”类型。

据我了解，TypeScript知道何时将if语句排除类型。

非常感谢您的指导。

Answer 1

您应该能够执行以下操作：

数据作为IDataType | undefined的并集传递给您的组件。

export interface IProps {
    data?: IDataType;
}

function Component(props: IProps) {
    return (<div>
        { data && <Tracker data={props.data} }
    </div>);
}

Answer 2

您可以尝试将父组件的状态初始化为null并将其传递给<Tracker/>。

定义

Tracker.defaultProps = {
    data: <Some valid data>
}

然后您可以在render的{{1}}函数中检查道具，并有条件地渲染一些加载状态/任何适合您的需求。

反应Typescript和内联if语句以建立类型

2 个答案: