Tapuscrit + Réagir: Recevez de l'objet Date, comme un type de date et de le transmettre à un autre composant

0

La question

J'ai pris un utilisateur affecté date d'accessoires d'un composant parent et essaye simplement de passer de cette date à un autre composant.

import Card from '../UI/Card';
import ExpenseDate from './ExpenseDate';
import './ExpenseItem.module.css'

type Form = {
   title: string;
   amount: number;
   date: Date;
}

const ExpenseItem = ({ title, amount, date }: Form) => {

   //Return Date UI Component
   return (
   <li>
      <Card className="expense-item">
         <ExpenseDate date={date} />
         <div className="expense-item__description">
            <h2>{title}</h2>
            <div className="expense-item__price">${amount}</div>
         </div>
      </Card>
   </li>
   );
};

export default ExpenseItem;

pour

import './ExpenseDate.module.css';
const ExpenseDate = (date: Date) => {
   //Retrieve Day Month and Year from Date object
   const month = date.toLocaleString('en-US', {month: 'long'});
   const day = date.toLocaleString('en-US', {day: '2-digit'});
   const year = date.getFullYear();

   //Return Dates to Date UI Component
   return (
      <div className="expense-date">
         <div className="expense-date__month">{month}</div>
         <div className="expense-date__day">{day}</div>
         <div className="expense-date__year">{year}</div>
      </div>
   )
};
export default ExpenseDate;

mais je reçois l'erreur

<ExpenseDate date={date} />

Le Type " { date: date; }' n'est pas cessible de type 'IntrinsicAttributes & Date". La propriété "date" n'existe pas sur le type "IntrinsicAttributes & Date". Je ne pense pas que j'essayais de faire passer "date" comme une propriété d'un objet Date, mais c'est ce que je comprends, il essaie de dire, et je n'ai aucune idée de comment le résoudre.

date properties reactjs types
2021-11-22 22:47:59
1

La meilleure réponse

1

ExpenseDate n'est pas tapé à la machine. En outre, vous accédez à la des accessoires dans un mauvais sens. Essayez de l'utiliser comme ça.

export type ExpenseDateProps = {
  date: Date;
}
const ExpenseDate: FC<ExpenseDateProps> = ({ date }) => {
   //Retrieve Day Month and Year from Date object
   const month = date.toLocaleString('en-US', {month: 'long'});
   const day = date.toLocaleString('en-US', {day: '2-digit'});
   const year = date.getFullYear();

   //Return Dates to Date UI Component
   return (
      <div className="expense-date">
         <div className="expense-date__month">{month}</div>
         <div className="expense-date__day">{day}</div>
         <div className="expense-date__year">{year}</div>
      </div>
   )
};
export default ExpenseDate;
2021-11-22 22:52:42

Dans d'autres langues

Cette page est dans d'autres langues

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................