Tengo un problema con mecanografiado en el siguiente componente simple.
Esto funciona como se esperaba:
import React from "react"; export default function App() { const simpleComp = (shouldSayA: boolean) => { return shouldSayA ? <p>a</p> : <p>b</p>; }; return <div>{simpleComp(true)}</div>; }Sin embargo, cuando convierto la función simpleComp en el componente de función JSX SimpleComp así:
import React from "react"; export default function App() { const SimpleComp = (shouldSayA: boolean) => { return shouldSayA ? <p>a</p> : <p>b</p>; }; return <div><SimpleComp shouldSayA={true} /></div>; }Obtuve el siguiente error:
const SimpleComp: (shouldSayA: boolean) => JSX.Element Type '{ shouldSayA: boolean; }' is not assignable to type 'IntrinsicAttributes & boolean'. Type '{ shouldSayA: boolean; }' is not assignable to type 'true'.ts(2322)Puedo corregir el error de TS haciendo algo como esto:
import React from "react"; export default function App() { const SimpleComp = ({shouldSayA}: { shouldSayA: boolean }) => { return shouldSayA ? <p>a</p> : <p>b</p>; }; return ( <div> <SimpleComp shouldSayA={true} /> </div> ); }pero estoy seguro de que hay alguna manera más fácil que me estoy perdiendo. ¿Por qué TS arroja un error en el segundo ejemplo?
El primer argumento pasado a un componente es el objeto que contiene todos los accesorios.
Si pasa un accesorio, será un objeto que contenga un solo par clave: valor.
Así es como funcionan los componentes. No hay forma más sencilla.
Dicho esto, por lo general es mejor:
import React from "react"; const App = () => { return ( <div> <SimpleComp shouldSayA={true} /> </div> ); }; type SimpleCompProps = { shouldSayA: boolean; }; const SimpleComp = ({ shouldSayA }: SimpleCompProps) => { return shouldSayA ? <p>a</p> : <p>b</p>; }; export default App;