React Native+TypeScript向子组件传props修改display属性报错如何解决

错误原因 #

• 类型定义范围过宽：React Native 中 display 样式仅支持 'flex' 和 'none' 两个固定字面量值，你在子组件Props中将display定义为宽泛的string类型，TypeScript 无法确认你传入的字符串属于合法值范围，因此抛出类型不匹配错误。
• 可选属性隐含undefined风险：你将display设为可选属性，当父组件未传递该参数时会得到undefined，额外增加了类型不兼容的可能。
• 额外的不规范定义：onCancel定义为any类型失去了TypeScript的类型校验意义。

修复步骤 #

1. 优化子组件Props类型定义，将display改为字面量联合类型，同时规范onCancel的函数类型：

export interface OTPNotifyComponentProps {
    onCancel?: () => void;
    display?: 'flex' | 'none',
}

2. 子组件解构Props时给display设置默认值，避免undefined的情况：

const OTPRibbonComponent = (props: OTPNotifyComponentProps) => {
    const {onCancel, display = 'flex'} = props;
    // 剩余代码保持不变
}

3. （可选）给父组件的状态增加类型约束，避免后续误操作修改为非法值：

const [OTPNotify, setOTPNotify] = useState<'flex' | 'none'>("flex");

效果验证 #

修改后display的类型完全匹配React Native样式要求的类型范围，类型报错会直接消失，点击子组件的关闭图标可以正常触发父组件的状态变更，将display切换为none实现隐藏效果。

内容的提问来源于stack exchange，提问作者pratteek shaurya