Расширение Typescript реагирует на нативный компонент View - PullRequest
Новая
       1

Расширение Typescript реагирует на нативный компонент View

0 голосов
/ 08 мая 2019

Попытка расширить react-native View компонент. Однако у меня возникают проблемы с расширением реквизита компонента View.

Вот как я расширяю Props

import { StyleSheet, View, ViewStyle, ViewProps } from "react-native";
interface Props extends ViewProps {
  pb?: keyof Size | number;
  pt?: keyof Size | number;
  pv?: keyof Size | number;
  ph?: keyof Size | number;
}

Вот мой пользовательский View компонент 

class WrappedView extends Component<Props> {
  render() {
    const methods = {};
    let { style: attrStyles, children, pb, pt, pv, ph, ...rest } = this.props;
    let style = [attrStyles];
    // Shorthand prop styles
    let propStyles: ViewStyle = {};
    propStyles.paddingBottom = pb;
    propStyles.paddingTop = pt;
    propStyles.paddingVertical = pv;
    propStyles.paddingHorizontal = ph;
    style.push(propStyles);
    return (
      <View style={style} {...rest} {...this.state} {...methods}>
        {children}
      </View>
    );
  }
}

Когда я пытаюсь сделать такой тест, 

const test = () => {
  return <WrappedView pb={"large"} width={"100%"} />;
};

Я получаю следующую проблему 

Type '{ pb: "large"; width: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<WrappedView> & Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
  Property 'width' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<WrappedView> & Readonly<Props> & Readonly<{ children?: ReactNode; }>'.

1 Ответ

0 голосов
/ 08 мая 2019

Код в вопросе действительно правильно расширяет подпорки, вместо этого это была ошибка клиента. Клиент должен прочитать: 

const test = () => {
  return <WrappedView pb={"large"} style={{width:"100%"}} />;
};
...