Блог

Это мой первый проект, использующий 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. Если вы используете React.FC<DataType> , DataType то автоматически применяется к props компоненту, но вы сделали props:any ModalComponent это , это обошло бы проблему компиляции, но позже это нарушило бы все. Итак, переключитесь props:any на просто props .

Совет: Просто наведите курсор props на VSCode, intellisense покажет вам его тип данных

2. Вы используете 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 сейчас все упростится, а потом укусит тебя.