在React Native中扩展通用道具

时间:2019-12-14 01:22:41

标签: typescript react-native react-navigation

很抱歉,如果标题误导您。我似乎找不到合适的标题。 我有两节课。

****************Form.tsx

interface Props{}
interface State{}
class Form extends Component<Props, State>{
   protected submit(){
      // contains a code when form submits
   }
}



****************Login.tsx

class LoginForm extends Form{
   render(){
       return(
          <View>
            <Button onClick = {() => this.props.navigation.goBack()}
            <Button onClick= {() => this.submit()} />
          </View>

       );
   }
}

我想这样做

<LoginForm navigation = {someObject} />

但是我不能这样做,因为我似乎找不到解决方法。我只是想知道如何将更多的道具传递给LoginForm。

1 个答案:

答案 0 :(得分:0)

我找到了一个解决方案,但只有在表单始终扩展且不用作组件的情况下,它才有效。在我的示例中,我从未打算将form用作组件。所以这是一个有帮助的解决方案。

***********Form.tsx
interface State{}
class Form<P= {}> extends Component<P, State>{

}

***********Login.tsx
interface LoginFormProps{
   navigation: SomeObjectType
}

class Login extends Form<LoginFormProps>{
}

然后我可以做

<LoginForm navigation = {someObject} />