类型不匹配打字稿反应

Question

我正在尝试将此 props 从父组件发送到子组件：

{
    "days": 7,
    "hours": 20,
    "minutes": 51,
    "seconds": 7
}

调用子组件的父组件是这样的：

const FunctionSolvingTime=()=>{
//returns always object as above
return 
{
    "days": 7,
    "hours": 20,
    "minutes": 51,
    "seconds": 7
}
}

const ParentComponent=()=>{
const [timeLeft, setTime]=useState(FunctionSolvingTime())



//some logic here

return(
<childComponent timeLeft={timeLeft}/>
)

消耗时间对象的子组件是：


type TTimeLeft = {
  days: number;
  hours: number;
  minutes: number;
  seconds: number;
};


const childComponent = (timeLeft: TTimeLeft) => {

//consume the data here
//{timeLeft.days},{timeLeft.hours}...
}

我得到的错误看起来像


Type '{ timeLeft: { days: number; hours: number; minutes: number; seconds: number; }; }' is not assignable to type 'IntrinsicAttributes & TTimeLeft'.
  Property 'timeLeft' does not exist on type 'IntrinsicAttributes & TTimeLeft'.

知道我在这里做错了什么吗？

谢谢

Answer 1

道具作为对象传递

const childComponent = ({ timeLeft }: { timeLeft: TTimeLeft }) => {

//consume the data here
//{timeLeft.days},{timeLeft.hours}...
}

类型不匹配打字稿反应

type not matching typescript react

types

typescript

reactjs