如何解决自定义组件中的道具 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]}
/>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。