Estoy entrenando cómo usar accesorios predeterminados y me encontré con un problema. ¿Alguien puede explicarme por qué los accesorios predeterminados no funcionan en este caso?
import React from 'react'; import PropTypes from 'prop-types'; import defaultImage from '../../../assets/DefaultImageOnError.svg' export const ImageComponent = ({ props }) => { return ( <img width={ props.size } src={ props.src } alt={ props.alt }/> ); }; ImageComponent.propTypes = { props: PropTypes.objectOf(PropTypes.string), }; ImageComponent.defaultProps = { props: { size: '150px', src: defaultImage, alt: 'error' } }Cuando apago accesorios para este componente en otro archivo. El componente debería cargar los accesorios predeterminados. ¿Por qué no está pasando esto?
Props es un objeto, cuando haces { props } estás accediendo a props.props en lugar de props.
solo reemplaza
export const ImageComponent = ({ props }) => {y
ImageComponent.defaultProps = { props: { size: '150px', src: defaultImage, alt: 'error' } }Con
export const ImageComponent = (props) => { const {size, src, alt} = props;o
export const ImageComponent = ({size, src, alt}) => { ...Y actualice propTypes para que coincidan (esto es probablemente un error tipográfico en su ejemplo):
ImageComponent.defaultProps = { size: '150px', src: defaultImage, alt: 'error' }Para simplificar esto y evitar este tipo de errores en el futuro, considere usar la desestructuración de objetos para establecer los valores predeterminados:
export const ImageComponent = (props) => { const { size = '150px', src = defaultImage, alt = 'error', } = props;o
export const ImageComponent = ({ size = '150px', src = defaultImage, alt = 'error', }) => { ...