Блог

Я создаю составной компонент. Затем я должен определить его тип. Например, вот пример составного компонента.

 const compositeComponent = ({ text, input }) => {
  return (
    <View>
      <Text {...text}></Text>
      <TextInput {...input} />
    </View>
  );
}
 

Я хочу определить типы «текст» и «ввод». Но я не смог получить тип Text и TextInput . Как я могу получить Text и TextInput tpyes и использовать его для типа реквизита составного компонента?

Я не смог получить тип Text и TextInput

На самом деле это очень просто! Если вам нужно получить тип переменной, вы можете использовать typeof оператор следующим образом: typeof Text .

(Примечание: встроенные React Native Text и TextInput являются компонентами класса, а классы в typescript являются их собственными типами. Таким образом, вы можете использовать Text и TextInput как типы для экземпляров этих компонентов. Однако нам нужен тип самого компонента, а не экземпляра, так что это все еще имеет место typeof .)

Это дает вам тип компонента, а не реквизит. Есть две вещи, которые мы можем сделать, чтобы получить типы реквизитов.

1. Посмотрите на определения типов компонентов и импортируйте соответствующие типы из React Native. (лучший подход)

 import {TextProps, TextInputProps} from "react-native";
 

2. Работайте в обратном направлении от компонента , используя тип утилиты React ComponentProps . (худший подход)

 import {ComponentProps} from "react";
import {Text, TextInput} from "react-native";

type TextProps = ComponentProps<typeof Text>

type TextInputProps = ComponentProps<typeof TextInput>
 

Теперь мы можем определить типы для CompositeComponent (которые должны быть прописными), используя реквизиты для отдельных компонентов.

 interface CompositeComponentProps {
    text: TextProps;
    input: TextInputProps;
}

const CompositeComponent = ({ text, input }: CompositeComponentProps) => {
  return (
    <View>
      <Text {...text}></Text>
      <TextInput {...input} />
    </View>
  );
}
 

Попробуйте воспользоваться приведенным ниже кодом:

 const CompositeComponent = (props) => {
  return (
    <View>
      <Text {...props.textProps}>{props.text}</Text>
      <TextInput {...props.inputProps} />
    </View>
  );
}
 

На экране или в компоненте, где вы собираетесь использовать Составной компонент.

 <CompositeComponent 
    textProps={
       style={{ fontSize: 16, color: 'black' }}
    }
    inputProps={
       onChangeText={(enteredText) => { console.log('process your enteredText here'); }}
       style={{ fontSize: 16, color: 'black' }} 
    }
    text="Enter TEXT here to show in the textView"
/>