Question

我有一个父组件：

const [OTPNotify, setOTPNotify] = useState("flex");

const closeOTPNotify = () => {
  setOTPNotify("none");
}

<OTPRibbonComponent onCancel={closeOTPNotify} display={OTPNotify}/>

我的子组件：

export interface OTPNotifyComponentProps {
    onCancel?: any;
    display?: string,
}
const OTPRibbonComponent = (props: OTPNotifyComponentProps) => {
    const {onCancel} = props;
    const display = props.display;
    return (
        <>
            <LinearGradient style={[styles.linearGradient, {display: display}]}>
                <Text>
                    Please Complete OTP Process
                </Text>
                <TouchableOpacity onPress={onCancel}>
                    <Icon name={'close-box-outline'} size={22} color={Colors.textDark} style={styles.iconStyle}/>
                </TouchableOpacity>
            </LinearGradient>
      </>
    )
}

我希望我的子组件将其显示从 flex 到 none，当我点击 Icon 时。

但我在 {display: display}

出现错误

错误：

No overload matches this call.
  Overload 1 of 2, '(props: LinearGradientProps | Readonly<LinearGradientProps>): LinearGradient', gave the following error.
    Type '{ display: string | undefined; }' is not assignable to type 'ViewStyle | Falsy | RegisteredStyle<ViewStyle> | RecursiveArray<ViewStyle | Falsy | RegisteredStyle<ViewStyle>> | readonly (ViewStyle | ... 1 more ... | RegisteredStyle<...>)[]'.
      Types of property 'display' are incompatible.
        Type 'string | undefined' is not assignable to type '"none" | "flex" | undefined'.
          Type 'string' is not assignable to type '"none" | "flex" | undefined'.
  Overload 2 of 2, '(props: LinearGradientProps, context: any): LinearGradient', gave the following error.
    Type '{ display: string | undefined; }' is not assignable to type 'ViewStyle | Falsy | RegisteredStyle<ViewStyle> | RecursiveArray<ViewStyle | Falsy | RegisteredStyle<ViewStyle>> | readonly (ViewStyle | ... 1 more ... | RegisteredStyle<...>)[]'.
      Types of property 'display' are incompatible.
        Type 'string | undefined' is not assignable to type '"none" | "flex" | undefined'.ts(2769)
const display: string | undefined
  Types of property 'display' are incompatible.
    Type 'string | undefined' is not assignable to type '"none" | "flex" | undefined'.

我对使用 typescript 使用 react native 很陌生，我无法弄清楚我做错了什么。请帮帮我。

Answer 1

尝试使用

export interface OTPNotifyComponentProps {
    onCancel?: any;
    display?: 'none' | 'flex',
}

如何在与打字稿本机反应的子组件中传递道具

1 个答案: