javascript - TypeScript Property 'navigation' is missing in type but required in type 'Props' Re

admin管理员组

文章数量:1405166

In a React Native App, I understand that when you pass your RootNavigator inside createAppContainer and export it, the navigation prop is implicitly made available in all child ponents.

export default createAppContainer(AppNavigator);

I have this ponent that is supposed to navigate to another screen using the navigation prop. I defined an interface for the props of this ponent like this:

props interface for ComponentA:

interface Props {
  count: number;
  navigation: NavigationStackProp<{quizId: number}>;
}

Now I render ComponentA like this:

...
render() {
    return (
        <ComponentA count={0} /> // TypeScript screams here that I am not passing the navigation props
    );
}

If I pass the navigation prop with ComponentA like this:

<ComponentA count={0} navigation={props.navigation} />

TypeScript is satisfied.

My question therefore is, do I have to pass navigation prop explicitly like this? It doesn't feel right to me. Is there a way I can suppress TypeScript warnings for this particular situation.

I am new to TypeScript so this might be something trivial but I will appreciate any help.

Thanks

In a React Native App, I understand that when you pass your RootNavigator inside createAppContainer and export it, the navigation prop is implicitly made available in all child ponents.

export default createAppContainer(AppNavigator);

I have this ponent that is supposed to navigate to another screen using the navigation prop. I defined an interface for the props of this ponent like this:

props interface for ComponentA:

interface Props {
  count: number;
  navigation: NavigationStackProp<{quizId: number}>;
}

Now I render ComponentA like this:

...
render() {
    return (
        <ComponentA count={0} /> // TypeScript screams here that I am not passing the navigation props
    );
}

If I pass the navigation prop with ComponentA like this:

<ComponentA count={0} navigation={props.navigation} />

TypeScript is satisfied.

My question therefore is, do I have to pass navigation prop explicitly like this? It doesn't feel right to me. Is there a way I can suppress TypeScript warnings for this particular situation.

I am new to TypeScript so this might be something trivial but I will appreciate any help.

Thanks

• javascript
• reactjs
• typescript
• react-native

Share Follow asked Feb 14, 2020 at 11:10 Awa MelvineAwa Melvine 4,08788 gold badges3737 silver badges4747 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You can use optional props by having ?

interface Props {
  count: number;
  navigation?: NavigationStackProp<{quizId: number}>;
}

本文标签：