反应本地道具打字稿

Question

这是传递接口的正确方法吗？如果没有，请指导我。谢谢！

这是我的界面

export interface Props {
  username: string;
  password: string;
  usernameTouched: boolean;
  passwordTouched: boolean;
}

这是我想知道这是否好

的部分

export const Login: React.FC<Props> = (props) => {
  const [user, setUser] = useState<props.username>('');
  const [pass, setPass] = useState<props.password>('');
  const [userTouch, setUserTouch] = useState<props.usernameTouched>(false);
  const [passTouch, setPassTouch] = useState<props.passwordTouched>(false);

  const handleUsername = (username: string) => {
    setUser(username);
  };

  const handlePassword = (password: string) => {
    setPass(password);
  };

  const handleUserBlur = () => {
    setUserTouch(true);
  };

  const handlePassBlur = () => {
    setPassTouch(true)
  };

  const userError = !user && userTouch ? strings.username_required : undefined;

  const passError = !pass && passTouch ? strings.password_required : undefined;

  return (
    <KeyboardAvoidingView style={styles.container} behavior="padding">
      <Logo label="Fitness" style={styles.imageLogo} />
      <View style={styles.form}>
        <TextField
          onChangeText={handleUsername}
          value={user}
          placeholder={strings.user_placeholder}
          returnKeyType="next"
          onBlur={handleUserBlur}
          error={userError}
        />
        <TextField
          onChangeText={handlePassword}
          value={pass}
          placeholder={strings.pass_placeholder}
          returnKeyType="done"
          secureTextEntry={true}
          onBlur={handlePassBlur}
          error={passError}
        />
      </View>
    </KeyboardAvoidingView>
  );
}

这是我只想弄清楚这是好还是不好的方式，如果不能，请帮助我，谢谢！

Answer 1

您可以使用：

export const Login = (props: Props) => {...}