自定义组件中的道具 React Native + Typescript

问题描述

我在访问自定义组件中的 onChangeText 时遇到问题。 这是我的组件的代码：

import React from 'react';
import {TextInput,StyleSheet} from 'react-native';

type Props=
{
   style:any
   
}

const Input = (props:Props) =>
{
    return <TextInput {...props} style = {{...styles.input,...props.style}} blurOnSubmit autoCorrect = {false} keyboardType = "number-pad" maxLength = {2} />
}

const styles = StyleSheet.create({
    
    input:{
        height:30,borderBottomColor: 'grey',borderBottomWidth: 1,marginVertical: 10
    }
        

})

export default Input;`

这是我正在使用的另一个文件中的代码部分：

 <Input style = {styles.input} onChangeText = {numberInputHandler} value = {enteredValue} />

OnChangeText 带有下划线，错误是“IntrinsicAttributes & Props”类型上不存在“onChangeText”属性。我在一个教程中看到，在我的自定义组件中输入 {...props} 后，可以访问它的道具，但是家伙是用 js 编写的，而我在 ts 中。感谢帮助！

解决方法

你必须告诉 Typescript 在 props 中有一个名为 'onChangeText' 的函数，所以你必须将它添加到你的 Props 类型中：

type Props=
{
   style:any
   onChangeText: Function
}

,

您的 Input 组件将其所有 props 传递到底层 TextInput，因此您可能希望它接受 TextInput 所做的所有 props。现在它只接受属性 style，因为它是 Props 中唯一的属性。

您想要的道具从 react-native 导出为 TextInputProps，因此您可以导入该 interface。

import { TextInput,TextInputProps,StyleSheet } from "react-native";

TextInputProps 已经包含一个属性 style，其类型比您的 any 准确得多，因此您可以完全删除您的 Props 接口。

const Input = (props: TextInputProps) => {

现在组合两种样式时会出错，因为 props.style 可能是样式数组。使用 react-native，您可以将多个样式连接到一个数组中，即使这些样式本身可能是一个数组。所以你可以这样组合：

style={[styles.input,props.style]}

由于我们允许使用所有 TextInputProps，因此如果您使用 Input 调用 <Input maxLength={5}/>，您将不会收到错误消息。现在，由于顺序，该 maxLength 道具将被 maxLength={2} 忽略并覆盖 - 后面的道具会覆盖前面的道具。如果这就是你想要的，那么这个组件就很好：

const Input = (props: TextInputProps) => {
  return (
    <TextInput
      {...props}
      style={[styles.input,props.style ]}
      blurOnSubmit
      autoCorrect={false}
      keyboardType="number-pad"
      maxLength={2}
    />
  );
};

如果您希望自定义道具覆盖默认道具，那么您需要更改顺序：

const Input = (props: TextInputProps) => {
  return (
    <TextInput
      blurOnSubmit
      autoCorrect={false}
      keyboardType="number-pad"
      maxLength={2}
      {...props}
      style={[styles.input,props.style]}
    />
  );
};