如何在react中使用typescript将接口传递给子组件

Question

好吧，我刚开始使用Typescript的反应，但我已经编程足够长的时间，这个问题让我觉得很愚蠢…

实际上我想做的就是定义一个接口，作为传递给子组件的属性的type。

一样……

interface Foo {
bar: string;
}
const Child = ({ foo } : Foo) => {
console.log(foo)
return <Text>Hello World</Text>
}
const TestPage = () => {
const fooObject : Foo = { bar: 'something' }
return <Child foo={fooObject} />
}

但是我一直看到这个错误强调了我在TestPage组件的return语句中传递的foo属性:

Type '{ foo: Foo; }' is not assignable to type 'IntrinsicAttributes & Foo'.
Property 'foo' does not exist on type 'IntrinsicAttributes & Foo'.

子组件上解构的foo属性下面的错误:

Property 'foo' does not exist on type 'Foo'.

这对我来说太基本了，有人能解释一下吗?

Answer 1

const Child = ({ foo } : Foo) => {

这意味着整个道具对象是一个Foo。这并不意味着foo是Foo。你想要的:

const Child = ({ foo }: { foo: Foo }) => {

或者给它一个命名类型:

interface ChildProps {
foo: Foo
}
const Child = ({ foo }: ChildProps) => {