quiero mostrar texto basado en la condición en un componente reutilizable usando reaccionar y javascript.
¿Qué estoy tratando de hacer?
Tengo una barra de componentes reutilizable como la siguiente,
const Bar = ({ label, indeterminate, showValue = !indeterminate, value, max = 100, ...rest }: BarProps) => ( <BarWrapper {...rest}> <Wrapper> <Progress value={value} max={max} /> {indeterminate && <span />} {showValue && ( <span> {value} <Unit>%</Unit> </span> )} </Wrapper> {label && <Label>{label}</Label>} </BarWrapper> );Uso este componente Bar en un par de otros componentes.
ahora hay un componente "ParentComponent" que usa este componente Bar. pero aquí no quiere mostrar valor con %. en su lugar, quiere mostrar el valor límite/total. así que agregué un código así,
const ParentComponent = () => { const limit = "10"; const total= "15"; return( <Bar showCompleted limit={limit} total={total} /> ); }Y he modificado el componente Bar para mostrar el límite/total en lugar de mostrar el valor porcentual.
const Bar = ({ label, indeterminate, showCompleted = !indeterminate, limit, total, showValue = !indeterminate, value, max = 100, ...rest }: BarProps) => ( <BarWrapper {...rest}> <Wrapper> <Progress value={value} max={max} /> {indeterminate && <span />} {showValue && ( <span> {value} <Unit>%</Unit> </span> )} {showCompleted && ( <span>{limit}/{total} </Wrapper> {label && <Label>{label}</Label>} </BarWrapper> );Pero el código anterior muestra tanto el valor porcentual como el límite/total. Cómo puedo arreglar esto. Podría alguien ayudarme con esto. Gracias.
Puede hacer lo siguiente (dos versiones para tener en cuenta la condición adicional. No estoy seguro de entender la lógica que está tratando de lograr, pero puede modificar las banderas de manera adecuada). Esa es la solución si tuviera value o valor completed value (no pueden ser ambos al mismo tiempo, lo que creo que está tratando de lograr).
De esa manera, no necesita 2 banderas ( showValue , showCompletedValue ) - Solo una. Si se pasa la propiedad showCompletedValue, muestra la primera (límite/total). Si se omite, mostrará el segundo (% de unidad).
{showCompletedValue ? ( <span>{limit}/{total}</span> ) : ( <span>{value} <Unit>%</Unit></span> )} // Another option if you need to combine 2 flags {(showCompletedValue && !indeterminate) ? ( <span>{limit}/{total}</span> ) : ( <span>{value} <Unit>%</Unit></span> )}El segundo ejemplo es en caso de que tenga que cumplir ambas condiciones.
Pruebe con la propiedad showCompletedValue :
const ParentComponent = () => { const limit = "10"; const total= "15"; return( <Bar showCompletedValue <--- update this prop. limit={limit} total={total} /> ); }