Búsqueda de sitios web

reactjs - Valor predeterminado de función en un componente de React usando Typescript

La pregunta es muy similar a esta, pero la mía se centra en la función por defecto. (Soy nuevo en front-end, por favor háganme saber si hay un nombre más oficial para ello)

Este es el código (estoy usando TypeScript 2.5):

export const TestProps = {
    Hello: (name: string) => {
        console.log(name);
    }
}

type TestPropsType = typeof TestProps;

export class TestComp extends React.Component<TestPropsType, {}>{    
    public render() {
        this.props.Hello("world");
        return <div>test</div>;
    }
}

Luego, cuando intento renderizar este componente:

ReactDOM.render(<TestComp />, document.getElementById("page"));

Recibí este error;

TS2322: El tipo '{}' no se puede asignar al tipo 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & ...'. El tipo '{}' no se puede asignar al tipo 'Readonly<{ Hello: (name: string) => void; }>'.

La propiedad 'Hello' falta en el tipo '{}'.

¿Cómo puedo solucionar este problema?

Respuesta #1

Primero, arreglemos tu ejemplo:

interface TestProps {
    Hello?: { (name: string): void };
}

export class TestComp extends React.Component<TestProps, {}> {    
    public static defaultProps: Partial<TestProps> = {
        Hello: name => console.log(name)
    };

    public render() {
        this.props.Hello("world");
        return <div>test</div>;
    }
}

La forma en que lo tenías escrito antes significaba que tu componente no podía ver TestProps (no se pasaba desde ningún lugar) y que Hello era una propiedad obligatoria. Usé una interfaz con Hello? para hacerla opcional, en lugar de usar typeof.

El error del compilador se debió al hecho de que se requería Hello, por lo que habrías necesitado usar:

ReactDOM.render(<TestComp Hello={() => {}} />, document.getElementById("page"));
                       // ^ pass Hello as a prop here

Hacer esto solucionaría el error de compilación, pero aún te quedarías con un comportamiento incorrecto, ya que el objeto TestProps en tu ejemplo nunca se usaría.

Si estás usando strictNullChecks, entonces tendrás que sortear un poco el sistema de tipos, ya que Hello es una propiedad opcional:

if (this.props.Hello) this.props.Hello("world");
// or
this.props.Hello && this.props.Hello("world");

Al comprobar si this.props.Hello es verdadero, el tipo se reduce de (name: string) => void | undefined a solo (name: string) => void, por lo que puedes llamar a la función.

Artículos relacionados