Strojom + Reagovať: Prijímajte Dátum objekt ako je dátum typu a odovzdať ju na iné zložky

0

Otázka

Vzal som používateľa priradené dátum, od rekvizity materský komponent a som len snaží prejsť že dátum na iné zložky.

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;

na

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;

ale ja si chybu

<ExpenseDate date={date} />

Typ '{ dátum: dátum; } "nie je priraditeľný k typu "IntrinsicAttributes & Date". Majetku ("date" neexistuje na typ "IntrinsicAttributes & Date". Nemyslel som si, že som sa snažil prejsť off "dátum" ako majetok Dátum objektu, ale to je to, čo som chápanie je to snaží povedať a nemám potuchy, ako to opraviť.

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

Najlepšiu odpoveď

1

ExpenseDate nie je napísaný so strojom. Navyše máte prístup k rekvizity zlým spôsobom. Skúste ju použiť ako je táto.

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

V iných jazykoch

Táto stránka je v iných jazykoch

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