三行代码  ›  专栏  ›  技术社区  ›  Alec Mather

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

  •  0
  • Alec Mather  · 技术社区  · 2 月前

    好吧,我对使用Typescript进行react还不熟悉,但我编程的时间已经够长了,这个问题让我觉得自己很笨。。。

    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} />
    
    }
    

    但我一直看到这个错误强调 foo 我在 return TestPage 组件:

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

    子组件上的属性:

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

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

    1 回复  |  直到 2 月前
        1
  •  2
  •   Nicholas Tower    2 月前
    const Child = ({ foo } : Foo) => {
    

    这意味着整个道具对象是一个 Foo . 这并不意味着 foo . 您需要:

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

    或者给它一个命名类型:

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