[英]Why does naming an interface 'Props' not give correct type-checking with a functional component? (typescript & react-native)
[英]How to extend a native's component's props TypeScript interface in a stateless, functional component in React Native?
为了保持一致的样式,React Native文档建议编写一个<CustomText />
文本组件,该组件包装本机的<Text />
组件。
尽管这很容易做到,但是我无法使用TypeScript 2来解决如何使<CustomText />
具有<Text />
所有道具,而不必重新声明它们。
这是我的组件:
import React from 'react';
import { Text } from 'react-native';
interface Props {
children?: any
}
const CustomText: React.SFC<Props> = (props) => (
<Text {...props}>
{props.children}
</Text>
);
如果我尝试将其与<CustomText numberOfLines={1} />
,则会导致错误
TS2339: Property 'numberOfLines' does not exist on type 'IntrinsicAttributes & Props'
在react-native.d.ts
,我看到有此导出:
export interface TextProperties extends React.Props<TextProperties> {
/**
* Specifies should fonts scale to respect Text Size accessibility setting on iOS.
*/
allowFontScaling?: boolean
/**
* Line Break mode. Works only with numberOfLines.
* clip is working only for iOS
*/
lineBreakMode?: 'head' | 'middle' | 'tail' | 'clip'
/**
* Used to truncate the text with an elipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number.
*/
numberOfLines?: number
/**
* Invoked on mount and layout changes with
*
* {nativeEvent: { layout: {x, y, width, height}}}.
*/
onLayout?: ( event: LayoutChangeEvent ) => void
/**
* This function is called on press.
* Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting).
*/
onPress?: () => void
/**
* @see https://facebook.github.io/react-native/docs/text.html#style
*/
style?: TextStyle
/**
* Used to locate this view in end-to-end tests.
*/
testID?: string
}
但是我不确定如何扩展它以在组件的Props
界面中利用它。
您只需要使Props
接口扩展TextProperties
:
interface Props extends TextProperties {
children?: any
}
您需要先导入它:
import { Text, TextProperties } from 'react-native';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.