在 ReactJs 中为传递的道具使用打字稿接口

Question

我使用打字稿创建了这个：

import React, {FC} from 'react';

interface Interface {

    name:string,

    age:number

}

const Home: React.FC<Interface> = (info) => {

    return (

        <div>

            <h1>{info.name}</h1>

        </div>

    );

};

export default Home;

///

const info = {name:'Boris', age:45}

function App() {

  return (

    <div className="App">

      <Home info={info}/>

    </div>

  );

}

展开片段

...但是我从打字稿中得到一个错误： Type '{ info: { name: string; age: number; }; }' is not assignable to type 'IntrinsicAttributes & Interface & { children?: ReactNode; }'.   Property 'info' does not exist on type 'IntrinsicAttributes & Interface & { children?: ReactNode; }'

问题：如何避免这种情况以及它出现的原因？

Answer 1

这段代码在这里：interface Interface {    name:string,    age:number}const Home: React.FC<Interface> = //...表示该组件Home需要 2 个道具：name和age。这段代码在这里：<Home info={info}/>传入一个名为info.所以你要么想传入name并age作为道具：<Home name={info.name} age={info.age}/>或者你想声明info道具：interface Props {    info: {        name:string,        age:number,    }}const Home: React.FC<Props> = ({ info }) => { /* ... */ }// Pass props like:<Home info={info}/>（注意({ info })解构赋值，它将infoprop the 赋值给局部变量info。）

Answer 2

你应该在组件中销毁你的道具Home。所以应该是const Home: React.FC<Interface> = ({ info }) => {&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <h1>{info.name}</h1>&nbsp; &nbsp; </div>&nbsp; );};