键入“{ author: Author；}”不能指定键入'IntrinsicAttributes & Author‘

Question

我对TS和反应完全陌生，我遇到了一个问题。我试图搜索许多地方，但似乎无法修复它。整个错误消息是:类型'{ author: Author；}‘不能分配到键入'IntrinsicAttributes & Author’。属性'author‘在'IntrinsicAttributes &Author’. is (2322)类型中不存在，我的代码是

import React from "react"

interface Data{
  author: Author;
  date:string;
  text:string;

}

interface Author{
  avatarUrl: string;
  name: string;

}
const Comment :React.FC<Data> =({author,text,date})=>{

  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar author={author} />
       <div className="UserInfo-name">
          {author.name}
    </div>

  </div>
  <div className="Comment-text">
    {text}
  </div>
  <div className="Comment-date">
    {date}
  </div>
</div>


)
}


  
const Avatar:React.FC<Author> = ({
  avatarUrl,
  name
} ) =>{
  return(
      <img className="Avatar"
        src={avatarUrl}
        alt={name}
      />
  
  )
}
const App = () =>{
  const data = {
    date:"2017:11:07",
    text:"Some text is here",
    author:{
      avatarUrl:"https://images.unsplash.com/photo-1554080353-a576cf803bda?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGhvdG98ZW58MHx8MHx8&w=1000&q=80",
      name:"teleph0nes"
    }

  }
  return(
    <>
    <Comment author={data.author}
    text = {data.text}
    date={data.date}
    

/>
</>
  )
}

export default App

Answer 1

您可以声明Avatar如下：

const Avatar:React.FC<Author> = ({

Author类型如下：

interface Author{
  avatarUrl: string;
  name: string;
}

这意味着Avatar需要avatarUrl和name这两个道具。但是您正在传递一个名为author的道具。

如果希望Avatar接收author支柱，则必须在类型中声明这一点，如下所示：

const Avatar:React.FC<{ author: Author }> = ({ author }) => {

这和你期望的一样。

看游乐场