0

Hola como puedo hacer que al invocar mi componente liste los parametros posibles?

me refiero a vero de este modo introducir la descripción de la imagen aquí

en mi componete salen otras cosas al documentarlo introducir la descripción de la imagen aquí

este es mi componente introducir la descripción de la imagen aquí

en caso de quitar los comentarios si los lista pero no dan los posibles valores introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

1
  • Por favor reduce las imágenes, me parece que con 2 imágenes de ejemplo se puede especificar lo que quieres hacer y el código de ejemplo pásalo como texto, saludos.
    – Richard
    Commented el 20 sept. 2021 a las 16:56

1 respuesta 1

0

Puede hacer hacerlo de 2 maneras, en ambas formas te mostrara los atributos con los que definas que necesita tu componente.

Utilizando JSDoc

De esta forma es fácil y nos ayuda a documentar también nuestros métodos, al igual que ayuda a proporcionar ayuda con los atributos por el tipado, para mas detalles puedes revisar la documentación.

/**
 * Ejemplo de tipado
 * @param {Object} param0 
 * @param {string} param0.name 
 * @param {number} param0.number
 * @returns 
 */
const TestPropsType = ({ name, number }) => {
    return (
        <div>
            Hola {name} {number}
        </div>
    )
}

Definir grupo de valores esperados

Esto se puede hacer de 2 maneras o incluso puede que de mas formas distintas que no conozca. De las 2 formas debería funcionar para definir los valores que se esperan en un parametro(en este caso props).

opción simple

/**
 * Ejemplo de tipado
 * @param {Object} param0 
 * @param {('value1' | 'value2')} param0.name 
 * @param {number} param0.number
 * @returns 
 */
const TestPropsType = ({ name, number }) => {
    return (
        <div>
            Hola {name} {number}
        </div>
    )
}

usando typedef

/**
 * @typedef {"keyvalue" | "bar" | "timeseries" | "pie" | "table"} MetricFormat
 */

/**
 * Ejemplo de tipado
 * @param {Object} param0 
 * @param {('value1' | 'value2')} param0.name 
 * @param {number} param0.number
 * @param {MetricFormat} param0.format
 * @returns 
 */
const TestPropsType = ({ name, number, format }) => {
    return (
        <div>
            Hola {name} {number}
        </div>
    )
}

2. Utilizando PropTypes

Una ves que definimos el componente y lo que recíbira por props, podemos usar PropTypes importado de prop-types y esto nos ayudara a la hora de ejecutar nuestro código y tener un componente requerido.

import PropTypes from 'prop-types';

const TestPropsType = ({ name, number }) => {
    return (
        <div>
            Hola {name} {number}
        </div>
    )
}

TestPropsType.propTypes = {
    name: PropTypes.string,
    number: PropTypes.number.isRequired
};

Aquí puedes ver un poco mas sobre los tipos, datos requeridos y todo lo que puedes usar con PropTypes.

2
  • Eso si me funciona, lo que quiero es que al invocar @param {string} param0.name me liste los posibles nombres, es decir juan || peres || jhon para el campo name, como en la primera imagen
    – user75463
    Commented el 19 sept. 2021 a las 4:49
  • @user75463 he actualizado mi respuesta, esto debería servirte para lo que mencionas. No olvides marcar la respuesta como correcta.
    – Richard
    Commented el 20 sept. 2021 a las 16:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.