Javascript 对ReactJs中传递的道具使用typescript接口

我使用typescript创建了这个：

import React，{FC}来自'React'；
接口{
名称：string，
年龄:数目
}
const Home:React.FC=（信息）=>{
返回(
{info.name}
);
};
导出默认主页；
///
const info={姓名：'Boris'，年龄：45}
函数App（）{
返回(
);
}

您应该在

主页

组件中销毁道具

应该如此

const Home: React.FC<Interface> = ({ info }) => {
  return (
    <div>
      <h1>{info.name}</h1>
    </div>
  );
};

const Home:React.FC=（{info}）=>{
返回(
{info.name}
);
};

此处的代码：

interface Interface {
    name:string,
    age:number
}
const Home: React.FC<Interface> = //...

<Home info={info}/>

传入一个名为

info

的道具

---

因此，您可以将

姓名

和

年龄

作为道具传入：

<Home name={info.name} age={info.age}/>

（注意

（{info}）

解构赋值，它将

info

属性赋值给局部变量

info

）

interface Props {
    info: {
        name:string,
        age:number,
    }
}
const Home: React.FC<Props> = ({ info }) => { /* ... */ }

// Pass props like:
<Home info={info}/>