Búsqueda de sitios web

reactjs - TS2339: La propiedad 'whyDidYouRender' no existe en el tipo 'FC'

Tal vez una pregunta tonta, ¡pero por qué este error TS2339?!

import * as React from 'react';

import StyledButton from './Button.styled';

interface ButtonProps {
    label?: String;
    onClick?: (e: React.SyntheticEvent) => any | Function;
    whyDidYouRender?: any;
}

const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
    return (
        <StyledButton onClick={props.onClick}>
            {props.label}
        </StyledButton>
    )
};
Button.whyDidYouRender = true;

export default Button;

Error en esta línea: Button.whyDidYouRender=true;

¿Y cómo puedo arreglar esto?

Respuesta #1

Editar :

Ahora que entiendo tu caso de uso, aquí hay una respuesta más simple. Cambia la línea donde haces la asignación a

(Button as any).whyDidYouRender = true

Eso te permitirá establecer la propiedad una vez y, de lo contrario, tratarlo como un componente funcional normal.

Respuesta original:

Estás intentando tratar la función Button como si tuviera el tipo Button: ButtonProps, pero Button está declarado como Button: React.FC<ButtonProps>.

FC<ButtonProps> es abreviatura de

(props: ButtonProps) => React.Node
// (this is slightly simplified)

lo que significa que es una función que recibe un objeto props de tipo ButtonProps y devuelve un nodo de React (aproximadamente, una representación de un elemento html como un botón).

Entonces, dentro del cuerpo de la función, puedes acceder a props.label y props.onClick, lo cual haces. También podrías acceder a props.whyDidYouRender dentro del cuerpo de la función.

El error que estás cometiendo es que esas propiedades existen en el argumento props, no en la función Button.

const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
    return (
        <StyledButton onClick={props.onClick}>
            {props.label}
            // You can do this, because props: ButtonProps
            {props.whyDidYouRender}
        </StyledButton>
    )
};
// FC<ButtonProps> doesn't have a whyDidYouRender property, so this fails.
Button.whyDidYouRender = true;

Si quieres acceder a whyDidYouRender dentro de la función, deberías pasarlo como una prop.

Si realmente quieres que la asignación Button.whyDidYouRender=true tenga éxito, podrías cambiar el tipo de Button.

Button: React.FC<ButtonProps> & {whyDidYouRender: any} = (props) => ...

Probablemente eso no sea lo que realmente quieres hacer, pero no está claro por el ejemplo lo que estás tratando de lograr, así que eso es lo mejor que puedo hacer.

Respuesta #2

Agregar una referencia a react-app-env.d.ts así resolvió el problema:

/// <reference types="react-scripts" />
/// <reference types="@welldone-software/why-did-you-render" />

Artículos relacionados