#typescript #react-native #react-hooks #react-props #react-typescript
Вопрос:
Это мой первый проект, использующий Typescript, а также React Native. Я просто создаю простую логику в App.tsx, затем я попытался разделить ее с помощью компонента. Но, когда я передаю реквизиты из модального компонента, я получаю сообщение об ошибке ts(2322). Я знаю, что код необходимо улучшить, так как я впервые использую Typescript. Я не знаю, может ли кто-нибудь помочь мне рассказать об этом. Ниже приведено оригинальное приложение.tsx, которое я сделал:
import { Button, FlatList, Modal, StyleSheet, Text, TextInput, View } from 'react-native';
import React from 'react';
import { useState } from 'react';
export interface AppProps {
id: string | number;
item: string;
name: string;
placeholder: string;
value: string
}
const App: React.FC<AppProps> = () => {
const [textInput, setTextInput] = useState<string>('');
const [itemList, setItemList] = useState<any[]>([]);
const [itemSelected, setItemSelected] = useState<any>({});
const [modalVisible, setModalVisible] = useState<boolean>(false);
const handlerConfirmDelete = () => {
setItemList(itemList.filter(item => item.id !== itemSelected.id));
setItemSelected({});
setModalVisible(false);
}
const handlerModalOpen = (id: string) => {
setItemSelected(itemList.find(item => item.id === id));
setModalVisible(true);
}
const onHandlerChangeText = (textValue: string) => setTextInput(textValue);
const handleAddPress = () => {
setItemList([
...itemList,
{
id: Math.random().toString(),
value: textInput,
},
]);
}
return (
<>
<View style={styles.container}>
<View style={styles.firstInputs}>
<TextInput placeholder='Item de Lista'
onChangeText={onHandlerChangeText}
value={textInput} />
<Button title='Add' onPress={handleAddPress} />
</View>
<View>
<FlatList
data={itemList}
keyExtractor={(item) => item.id}
renderItem={(data) => (
<View>
<Text>{data.item.value}</Text>
<Button title='X' onPress={() => handlerModalOpen(data.item.id)} />
</View>
)}
/>
</View>
</View>
<Modal animationType='slide' visible={modalVisible}>
<View>
<Text>Borrar</Text>
</View>
<View>
<Text>seguro q borramos?</Text>
</View>
<View>
<Text>{itemSelected.value}</Text>
</View>
<View>
<Button onPress={handlerConfirmDelete} title='Confirm' />
</View>
</Modal>
</>
);
}
export default App;
Это новое приложение.tsx и модальный.tsx:
Приложение.tsx
import { Button, FlatList, Modal, StyleSheet, Text, TextInput, View } from 'react-native';
import ModalComponent from './components/Modal';
import React from 'react';
import { useState } from 'react';
export interface AppProps {
id: string | number;
item: string;
name: string;
placeholder: string;
value: string
}
const App: React.FC<AppProps> = () => {
const [textInput, setTextInput] = useState<string>('');
const [itemList, setItemList] = useState<any[]>([]);
const [itemSelected, setItemSelected] = useState<any>({});
const [modalVisible, setModalVisible] = useState<boolean>(false);
const handlerConfirmDelete = () => {
setItemList(itemList.filter(item => item.id !== itemSelected.id));
setItemSelected({});
setModalVisible(false);
}
const handlerModalOpen = (id: string) => {
setItemSelected(itemList.find(item => item.id === id));
setModalVisible(true);
}
const onHandlerChangeText = (textValue: string) => setTextInput(textValue);
const handleAddPress = () => {
setItemList([
...itemList,
{
id: Math.random().toString(),
value: textInput,
},
]);
}
return (
<>
<View style={styles.container}>
<View style={styles.firstInputs}>
<TextInput placeholder='Item de Lista'
onChangeText={onHandlerChangeText}
value={textInput} />
<Button title='Add' onPress={handleAddPress} />
</View>
<View>
<FlatList
data={itemList}
keyExtractor={(item) => item.id}
renderItem={(data) => (
<View>
<Text>{data.item.value}</Text>
<Button title='X' onPress={() => handlerModalOpen(data.item.id)} />
</View>
)}
/>
</View>
</View>
<ModalComponent modalVisible={modalVisible} itemSelected={itemSelected} handlerConfirmDelete={handlerConfirmDelete} />
</>
);
}
export default App;
Модальный.tsx
import { Button, Modal, StyleSheet, Text, View } from "react-native";
import { AppProps } from "../../App";
export interface ModalComponentProps {
props: AppProps
}
const ModalComponent: React.FC<ModalComponentProps> = (props: any) => {
const {modalVisible, itemSelected, handlerConfirmDelete} = props;
return (
<>
<Modal animationType='slide' visible={modalVisible}>
<View style={styles.modalContainer}>
<View style={[styles.modalContent, styles.shadow]}>
<Text style={styles.modalMessage}>Seguro deseas borrar?</Text>
<Text style={styles.modalTitle}>{itemSelected.value}</Text>
<View>
<Button onPress={handlerConfirmDelete} title='Confirm' />
</View>
</View>
</View>
</Modal>
</>
);
}
export default ModalComponent;
Я еще не ввел стили, так как сначала хочу, чтобы они работали правильно. Заранее спасибо.
Это ошибка: Тип «{ modalVisible: логическое значение; Элемент выбран: любой; handlerConfirmDelete: () => пусто;} » не может быть присвоен типу «Встроенные атрибуты amp; ModalComponentProps amp; { дочерние элементы?: ReactNode; }’. Свойство ‘modalVisible’ не существует для типа ‘Встроенные атрибуты amp; ModalComponentProps amp; { дочерние элементы?: Режим реакции; }’.
Комментарии:
1. В чем заключается ошибка? Что вы пытаетесь сделать, и что именно не работает?
2. Привет @подоконник ошибка такого типа «{modalVisible: логическое значение; Выбран элемент: любой; handlerConfirmDelete: () => пусто;} » не может быть присвоен типу «Встроенные атрибуты amp; ModalComponentProps amp; { дети?: ReactNode; }’. Свойство ‘modalVisible’ не существует для типа ‘Встроенные атрибуты amp; ModalComponentProps amp; { дочерние элементы?: Режим реакции; }’. Я пытаюсь передать реквизиты Modal.tsx в приложение.tsx У меня есть те ошибки из машинописи, из-за которых приложение не работает
3. Пожалуйста, добавьте ошибку в вопрос 🙂
4. Я просто добавил это к вопросу @SamridhTuladhar
5. Понял, вы написали неправильный интерфейс для
ModalComponent
, я просто напишу правильный интерфейс в ответе 🙂
Ответ №1:
Некоторые основы здесь:
- Если вы используете
React.FC<DataType>
,DataType
то автоматически применяется кprops
компоненту, но вы сделалиprops:any
ModalComponent
это , это обошло бы проблему компиляции, но позже это нарушило бы все. Итак, переключитесьprops:any
на простоprops
.
Совет: Просто наведите курсор props
на VSCode, intellisense покажет вам его тип данных
- Вы используете
AppProps
вApp.tsx
качествеReact.FC<AppProps>
, если вы измените его наconst App: React.FC<AppProps> = (props) => {...}
иprops
снова наведете курсор , вы увидите, что intellisense делает это волшебно, но поскольку он нигде не используется в коде, вы можете удалить его.
Теперь перейдем к основной проблеме: если вы наведете курсор props
на нее, то увидите, что она содержит, она будет содержать только props: AppProps
то, что нигде не используется в вашем коде.
Вместо этого измените его на :
interface ModalComponentProps {
modalVisible: boolean
itemSelected: any // you have set any in App.tsx
handlerConfirmDelete: () => void
}
и это должно сработать. Я все еще думаю, что у вас возникнут проблемы styles
, так как я не знаю, откуда он импортирован. 🙂
Я бы рекомендовал использовать object
вместо any
или пользовательский интерфейс object
. any
сейчас все упростится, а потом укусит тебя.
Комментарии:
1. Спасибо за вашу помощь, Самрид! На каждом .tsx есть компоненты стиля, я просто не добавил их в вопрос.
2. Круто, не за что! Нежелательный совет: Если машинопись создает проблемы во время компиляции…. это то, для чего она была разработана 🙂 Предполагается, что он поймает эти проблемы до того, как достигнет производства, поэтому старайтесь избегать
any
как можно большего. Существуют и другие типыobject
данных, такие какunknown
,never
и т.д., Которые вам следует изучить 😁