Tengo este componente de formulario que creé, pero en algunos casos quiero que tenga un botón y en otros casos quiero que tenga un campo de texto en lugar del campo de entrada como he codificado.
function FormTypeOne(props) { return ( <form className={classes.form}> <div className={classes.control}> <label htmlFor={"title"}>{props.title}</label> <input type={props.type} required id={props.id} /> </div> </form> ) }¿Es posible agregar un botón y un campo de texto y luego decidir cuál quiero usar? ¿O necesito hacer 3 componentes diferentes?
Sí, puede proporcionar sus condiciones en props, luego mostrar el botón derecho dependiendo de los props recibidos:
function FormTypeOne({case1, case2}) { return ( <form className={classes.form}> <div className={classes.control}> <label htmlFor={"title"}>{props.title}</label> <input type={props.type} required id={props.id} /> {case1 && <button />} {case2 && <label />} </div> </form> ) }Entonces, si caso1 = verdadero, mostrará el botón y si caso2 es verdadero, mostrará la etiqueta
Por ejemplo :
function NewMeetupForm() { return ( <Card> {' '} <FormTypeOne title="Meetup Title" /> <FormTypeOne title="Meetup Image" htmlFor="image" type="url" id="image" case1 /> <FormTypeOne title="Address" type="text" id="address" case2 /> </Card> ); }Así que tendrás un botón en el segundo y una etiqueta en el tercero.
Puedes enviar un apoyo para decidir qué mostrar
function FormTypeOne(props) { const htmlElem = useMemo(() => props.isButton ? <button /> : <input type={props.type} required id={props.id} /> , [props.isButton]) return ( <form className={classes.form}> <div className={classes.control}> <label htmlFor={"title"}>{props.title}</label> {htmlElem} </div> </form> ) } en este ejemplo, use un accesorio boolean isButton