#typescript #react-native
#typescript #react-native
Вопрос:
Я создаю составной компонент. Затем я должен определить его тип. Например, вот пример составного компонента.
const compositeComponent = ({ text, input }) => {
return (
<View>
<Text {...text}></Text>
<TextInput {...input} />
</View>
);
}
Я хочу определить типы «текст» и «ввод». Но я не смог получить тип Text
и TextInput
. Как я могу получить Text
и TextInput
tpyes и использовать его для типа реквизита составного компонента?
Ответ №1:
Я не смог получить тип
Text
иTextInput
На самом деле это очень просто! Если вам нужно получить тип переменной, вы можете использовать typeof
оператор следующим образом: typeof Text
.
(Примечание: встроенные React Native Text
и TextInput
являются компонентами класса, а классы в typescript являются их собственными типами. Таким образом, вы можете использовать Text
и TextInput
как типы для экземпляров этих компонентов. Однако нам нужен тип самого компонента, а не экземпляра, так что это все еще имеет место typeof
.)
Это дает вам тип компонента, а не реквизит. Есть две вещи, которые мы можем сделать, чтобы получить типы реквизитов.
- Посмотрите на определения типов компонентов и импортируйте соответствующие типы из React Native. (лучший подход)
import {TextProps, TextInputProps} from "react-native";
- Работайте в обратном направлении от компонента , используя тип утилиты 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>
);
}
Ответ №2:
Попробуйте воспользоваться приведенным ниже кодом:
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"
/>
Комментарии:
1. Спасибо, но когда я делаю это, в CompositeComponent появляется предупреждение with
Binding element 'Parameter 'props' implicitly has an 'any' type.
.2. Используете ли вы TypeScript?
3. Да 🙂 Итак, я должен определить тип реквизита CompositeComponent
4. Да, вам необходимо определить типы для реквизитов