Hola como puedo hacer que al invocar mi componente liste los parametros posibles?
me refiero a vero de este modo
en mi componete salen otras cosas al documentarlo
en caso de quitar los comentarios si los lista pero no dan los posibles valores
Hola como puedo hacer que al invocar mi componente liste los parametros posibles?
me refiero a vero de este modo
en mi componete salen otras cosas al documentarlo
en caso de quitar los comentarios si los lista pero no dan los posibles valores
Puede hacer hacerlo de 2 maneras, en ambas formas te mostrara los atributos con los que definas que necesita tu componente.
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>
)
}
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>
)
}
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
.
@param {string} param0.name
me liste los posibles nombres, es decir juan || peres || jhon
para el campo name, como en la primera imagen
Commented
el 19 sept. 2021 a las 4:49