Soy totalmente nuevo en TS y reacciono y me encontré con un problema. Intenté buscar en muchos lugares y parece que no puedo solucionarlo. El mensaje de error completo es: Escriba '{ autor: Autor; }' no se puede asignar al tipo 'IntrinsicAttributes & Author'. La propiedad 'autor' no existe en el tipo 'IntrinsicAttributes & Author'.ts(2322) y mi código es
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 AppDeclaras Avatar así:
const Avatar:React.FC<Author> = ({ Y el Author escribe así:
interface Author{ avatarUrl: string; name: string; } Lo que significa que Avatar esperará dos accesorios avatarUrl y name . Pero le estás pasando un accesorio llamado author .
Si desea que Avatar reciba un accesorio de author , debe declararlo en el tipo con algo como:
const Avatar:React.FC<{ author: Author }> = ({ author }) => {Que hace lo que esperas.