类型'{ id: any；user_ip: any；user_Agent: any；urlReferer: any；url: any；}‘不能赋值给类型'(IntrinsicAttributes

Question

react: "^16.12.0",   
react-dom: "^16.12.0",   
@types/react: "^16.9.49",   
typescript: "^4.0.3"

在尝试将道具传递给组件时，如何在以下代码中解决上述类型问题？

pages/item.tsx

import SingleItem from '../components/SingleItem';
import { withRouter } from "next/router";

const Item = props => (
  <div>
    <SingleItem id={props.query.id} user_ip={props.userIP} user_Agent={props.userAgent} url={props.router.asPath} urlReferer={props.urlReferer} />
  </div>
);

export default withRouter(Item);

完整的错误消息如下：

Type '{ id: any; user_ip: any; user_Agent: any; url: any; urlReferer: any; }' is not assignable to type '(IntrinsicAttributes & Pick<WithRouterProps, never> & { children?: ReactNode; }) | (IntrinsicAttributes & Pick<...> & RefAttributes<...>)'.
  Property 'id' does not exist on type '(IntrinsicAttributes & Pick<WithRouterProps, never> & { children?: ReactNode; }) | (IntrinsicAttributes & Pick<...> & RefAttributes<...>)'.ts(2322)

我的部分回购可以在这里找到：https://github.com/TheoMer/next_apollo

Answer 1

这里有很多要介绍的内容。

首先，这是一个function-component，所以应该将其声明为FC<T>。

你还应该

import React from "react"

在所有tsx文件中。这是必须的。

function-components的首选是使用钩子，所以去掉withRouter和start using useRouter instead。

FC<T>的泛型类型T声明了组件属性。

把所有这些放在一起，你的组件应该看起来像这样：

import SingleItem from '../components/SingleItem';
import { useRouter } from 'next/router'
import React, {FC} from "react";

interface ItemProps{
    query:{ //there's probably a `Query` type IDK about
        id:string;
    };
    userIP:string;
    userAgent:string;
    urlReferer:string;
}

const Item:FC<ItemProps> = (props) => {
  const router = useRouter();
  return(
      <div>
        <SingleItem 
            id={props.query.id} 
            user_ip={props.userIP} 
            user_Agent={props.userAgent} 
            url={router.asPath} 
            urlReferer={props.urlReferer} />
      </div>)
};