![](/img/trans.png)
[英]How do I use default props in a React component with Typescript?
[英]How can I set default values for props on a React TypeScript component?
我使用这种方法来设置默认道具:
TextInputField.defaultProps = {
isMultiline: false
}
但这给了我这个错误:
属性'defaultProps'在'typeof TextInputField'类型上不存在。
我想念什么?
import * as React from "react"
import { Text, TextInput, View } from "react-native"
import MyButton from "./MyButton"
import { colors } from "../styles/colors"
import { styles } from "../styles/form-elements"
interface IComponentState {
textInputValue: string
}
interface IComponentProps {
isMultiline: boolean
keyboardType?: any
label?: string
nextButtonText?: string
onSubmit?: () => void
placeholderText?: string
showNextButton?: boolean
}
export default class TextInputField extends React.Component<IComponentProps, IComponentState> {
constructor(props: IComponentProps) {
super(props)
}
public render() {
const {
keyboardType,
label,
nextButtonText,
onSubmit,
placeholderText,
showNextButton,
isMultiline
} = this.props
const textBoxHeight = isMultiline ? 150 : 50
return (
<View>
<Text style={styles.label}> {this.props.label} </Text>
<TextInput
multiline={isMultiline}
numberOfLines={5}
style={[styles.textInput, { height: textBoxHeight }]}
placeholder={placeholderText}
placeholderTextColor={colors.light_gray}
keyboardType={keyboardType}
onBlur={showNextButton ? undefined : onSubmit}
/>
{showNextButton &&
<MyButton
title={nextButtonText}
onPress={onSubmit}
/>
}
</View>
)
}
}
/**********************
This gives the error:
`Property 'defaultProps' does not exist on type 'typeof TextInputField'.`
**************************/
TextInputField.defaultProps = {
isMultiline: false,
nextButtonText: "Next",
onSubmit: () => true,
showNextButton: true,
}
您也可以这样做。
export default class TextInputField extends React.Component<IComponentProps, IComponentState> {
constructor(props: IComponentProps) {
super(props)
}
static defaultProps = {
isMultiline: false,
nextButtonText: "Next",
onSubmit: () => true,
showNextButton: true,
}
public render() {
const {
keyboardType,
label,
nextButtonText,
onSubmit,
placeholderText,
showNextButton,
isMultiline
} = this.props
const textBoxHeight = isMultiline ? 150 : 50
return (
<View>
<Text style={styles.label}> {this.props.label} </Text>
<TextInput
multiline={isMultiline}
numberOfLines={5}
style={[styles.textInput, { height: textBoxHeight }]}
placeholder={placeholderText}
placeholderTextColor={colors.light_gray}
keyboardType={keyboardType}
onBlur={showNextButton ? undefined : onSubmit}
/>
{showNextButton &&
<MyButton
title={nextButtonText}
onPress={onSubmit}
/>
}
</View>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.