Tengo el siguiente código
const pageArea = (Component,title) => ({ ...props }) => { <Component {...props} /> }Esto funciona bien en js, pero quiero cambiar esto a mecanografiado
lo intenté así
function ErrorFallback({error, resetErrorBoundary}) { return ( <div role="alert"> <p>Something went wrong:</p> <pre>{error.message}</pre> <button onClick={resetErrorBoundary}>Try again</button> </div> ) } const pageArea = (Component:ReactNode,title:String) => ({ ...props }) => { return ( <> {/* <Header pTitle= {title} /> */} <div> <ErrorBoundary FallbackComponent={ErrorFallback}> {Component ? <Component {...props} /> : null} </ErrorBoundary> </div> </> ); };Pero no funciona... texto mecanografiado que dice error de cualquier tipo
¿Puede alguien ayudarme a convertir eso a mecanografiado? También me resulta difícil entender la sintaxis de esta función de flecha... si alguien puede sugerir algún enlace para entenderlo, sería genial...
Gracias
Hay muchas opciones para hacer, por ejemplo, puede definir su tipo fuera del componente y luego pasarlo al componente:
Primero, debe importar el tipo adecuado de la biblioteca de react
import React, {FunctionComponent, ReactNode} from 'react'; Ahora, puede definir sus tipos con la interface que proviene de TypeScript :
interface PageAreaProps { children: ReactNode; title: string; }Finalmente, aplique esa interfaz en su componente:
const PageArea: FunctionComponent<PageAreaProps> = ({children, title}) => { // rest of the codes} Nota: utilice siempre uppercase para la primera letra de los nombres de sus componentes.
import { FunctionComponent } from "react"; interface Props { title: string } const pageArea = (Component: FunctionComponent<Props>, title: string) => () => { return <Component title={title} /> } function Test ({ title }: Props) { return <h1>{title}</h1> } export default function App() { return ( <div className="App"> {pageArea(Test, 'some')()} </div> ); }