如何在子组件中传递道具以使用打字稿做出本机反应答案

【问题标题】：How to pass props in child component in react native with typescript如何在子组件中传递道具以使用打字稿做出本机反应
【发布时间】：2021-06-28 21:32:53
【问题描述】：

我有一个父组件：

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 很陌生，我无法弄清楚我做错了什么。请帮帮我。

【问题讨论】：

只是提示尝试，使用“display?:any;”。这是一个类型错误。该字符串非常通用。我不知道 React 的样式类型，那么我无法用“好的”解决方案来帮助您解决这个问题。

标签： reactjs typescript react-native react-native-android react-native-ios

【解决方案1】：

尝试使用

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

【讨论】：