为响应原生动态组件(包装器元素)创建接口

Question

export interface IWEProps {
accessibilityLabel: string;
onPress?: ((status: string | undefined) => void) | undefined;
localePrefix: string;
children: JSX.Element[];
style: IWEStyle;
type?: string;
}
class WrappingElement extends  React.PureComponent<IWEProps> {
render() {
const {
onPress, children, type, accessibilityLabel, style,
} = this.props;
return onPress ? (
<TouchableOpacity
accessibilityLabel={accessibilityLabel}
style={style}
type={type}
onPress={() => onPress(type)}
>
{ children }
</TouchableOpacity>
) : (
<View
accessibilityLabel={accessibilityLabel}
style={style}
type={type}
>
{ children }
</View>
);
}
}

这就是我正在做的，这是一个错误，我在View和TouchableOpacity中获得typeprop:

属性'type'不存在类型'IntrinsicAttributes &IntrinsicClassAttributes,只读"。

Answer 1

错误信息是直接的:组件View和TouchableOpacity不存在proptype。View可用的props在这里有文档说明。TouchableOpacity可用的props在这里有文档。

由于您在WrappingElement中没有使用type做任何事情，而不是将其传递给View和TouchableOpacity以及onPress函数，您可以删除此道具。下面的代码与您的代码相同，但不会抛出类型错误。

export interface IWEProps {
accessibilityLabel: string;
onPress?: ((status: string | undefined) => void) | undefined;
localePrefix: string;
children: JSX.Element[];
style: IWEStyle;
type?: string;
}
class WrappingElement extends  React.PureComponent<IWEProps> {
render() {
const {
onPress, children, type, accessibilityLabel, style,
} = this.props;
return onPress ? (
<TouchableOpacity
accessibilityLabel={accessibilityLabel}
style={style}
onPress={() => onPress(type)}
>
{ children }
</TouchableOpacity>
) : (
<View
accessibilityLabel={accessibilityLabel}
style={style}
>
{ children }
</View>
);
}
}