在 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 }) => {

  return (

    <div>

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

    </div>

  );

};