Блог

Я пытаюсь передать пользовательский объект из одного компонента React в другие и не могу понять, что должен определить TypeScript.

Вот два файла компонентов:

FlashcardList.tsx:

 import React from 'react';
import Flashcard from './Flashcard';

interface FlashcardListProps {
    flashcards: any[]
}

const FlashcardList = ({ flashcards }: FlashcardListProps) =&&t; (
    <div className="content"&&t;
        {flashcards.map(flashcard =&&t; <Flashcard flashcard={flashcard} key={flashcard.id} /&&t;)}
    </div&&t;
);

export default FlashcardList;
  

СТРОКА: {flashcards.map(flashcard =&&t; <Flashcard flashcard={flashcard} key={flashcard.id} /&&t;)}
ОШИБКА: тип ‘{ flashcard: any; key: any; }’ не может быть присвоен типу ‘IntrinsicAttributes amp; IntrinsicClassAttributes amp; Readonly<{}&&t; amp; Readonly<{ дочерние элементы?: ReactNode; }&&t;’. Свойство ‘flashcard’ не существует для типа ‘IntrinsicAttributes amp; IntrinsicClassAttributes amp; Readonly<{}&&t; amp; Readonly<{ дочерние элементы?: ReactNode; }&&t;’

Flashcard.tsx:

 import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
const &reyBox = require('../ima&es/&reybox.pn&');

interface Flashcard {
    cate&ory: Strin&,
    front: Strin&,
    back: Strin&
}
interface FlashcardState {
    flashcard: Flashcard
}

class Flashcard extends Component<{}, FlashcardState&&t; {

    constructor(props: FlashcardState) {
        super(props);
        this.state = {
            flashcard: Flashcard
        };
    }

    render() {
        return (
            <div className="flashcard"&&t;
                <div className="front"&&t;{this.state.flashcard.cate&ory.toUpperCase()}: {this.state.flashcard.front}</div&&t;
                <div className="back"&&t;{this.state.flashcard.back}</div&&t;
                <div className="text-success"&&t;test of bootstrap</div&&t;
                <im& src={&reyBox} alt="&rey box" className="im&-fluid" /&&t;
            </div&&t;
        )
    }
}

export default Flashcard;
  

СТРОКА: flashcard: Flashcard
ОШИБКА: у type ‘typeof Flashcard’ отсутствуют следующие свойства из type ‘Flashcard’: cate&ory, front, back, render и еще 6.ts(2740) Flashcard.tsx(19, 15): Вы имели в виду использовать ‘new’ с этим выражением?

Что мне нужно изменить, чтобы TypeScript имел то, что ему нужно с точки зрения типов / интерфейсов, поскольку объект flashcard передается от одного компонента к другому через props?

Я признаю, что приведенный выше вопрос был немного невежественным, но @jonrsharpe выше помог указать мне способ исправить все проблемы и заставить его работать, спасибо.

Для тех, кто еще испытывает трудности с синтаксисом TypeScript в компонентах React, вот два вышеупомянутых файла, измененных таким образом, чтобы они теперь работали. Обратите внимание, прежде всего, на то, что в FlashcardList.tsx изменился способ отправки всего объекта в виде prop ( flashcard={flashcard} ) на отправку деконструированных параметров объекта с использованием оператора spread ( {...flashcard} ), которые затем принимаются во Flashcard.tsx в качестве реквизитов этого компонента, т. Е. весь компонент имеет тип IFlashcard и поэтому просто получает деконструированные параметры по отдельности в качестве реквизитов.

FlashcardList.tsx:

 import React from 'react';
import Flashcard from './Flashcard';

interface IFlashcard {
    id: number,
    cate&ory: strin&,
    front: strin&,
    back: strin&,
    key: number
}

interface IFlashcardListProps {
    flashcards: IFlashcard[]
}

const FlashcardList = ({ flashcards }: IFlashcardListProps) =&&t; (
    <div className="content"&&t;
        {flashcards.map(flashcard =&&t; <Flashcard {...flashcard} key={flashcard.id} /&&t;)}
    </div&&t;
);

export default FlashcardList;
  

Flashcard.tsx:

 import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
const &reyBox = require('../ima&es/&reybox.pn&');

interface IFlashcard {
    cate&ory: strin&,
    front: strin&,
    back: strin&
}

class Flashcard extends Component<IFlashcard&&t; {

    render() {
        return (
            <div className="flashcard"&&t;
                <div className="front"&&t;{this.props.cate&ory.toUpperCase()}: {this.props.front}</div&&t;
                <div className="back"&&t;{this.props.back}</div&&t;
                <div className="text-success"&&t;test of bootstrap</div&&t;
                <im& src={&reyBox} alt="&rey box" className="im&-fluid" /&&t;
            </div&&t;
        )
    }
}

export default Flashcard;