自定义组件中的 props React Native + Typescript

Question

我在自定义组件中访问 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} 后，可以访问它的 props，但是家伙在 js 中编写，而我在 ts 中。感谢帮助！

Answer 1

您的Input组件将其所有 props 传递给底层TextInput，因此您可能希望它接受它所做的所有 props TextInput。现在它只接受 prop，style因为这是Props.

您想要的 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]}

由于我们允许所有这些，因此如果您调用with ，TextInputProps您不会收到错误。现在，由于顺序原因，该道具将被忽略并被覆盖——后面的道具会覆盖前面的道具。如果这就是您想要的，那么这个组件就可以了：Input<Input maxLength={5}/>maxLengthmaxLength={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]}
    />
  );
};