¿Cuál es la mejor manera de ocultar o mostrar un div (o cualquier elemento) en un cambio de estado?
Aquí esta lo que hice:
React.useEffect(()=>{ (async () => { alert(props.changeVisibiltyEvent) })() },[props.changeVisibiltyEvent])Este efecto se llama cada vez que sucede algo más en mi aplicación. La alerta muestra un 0 o un 1.
Si es cero, el elemento debería ser invisible, si es uno, quiero que se vuelva visible. Fácil.
Este es el elemento:
<td style={{ visibility: 'hidden' }}> <Button variant="contained" onClick={() => changeCase('closeCase')}>fall schließen</Button> </td>Logré encontrar el atributo 'oculto' para ocultarlo y 'visible' para mostrarlo.
¿Cuál es la mejor práctica para vincular el estado cambiado 0 o 1 a visible a oculto en el elemento?
Siempre puede usar condiciones en su método de renderizado, pero asegúrese de no usarlas demasiado. En este caso, puede utilizar
style={{ visibility: props.changeVisibilityEvent? 'visible' : 'hidden' }}> para ocultar el componente, o usar
{props.changeVisibilityEvent && <td>...} Tenga en cuenta que cuando usa el segundo enfoque, es posible que vea 0 en su página, porque la condición devuelve falso y el método de representación incluye el resultado, incluso si no es un componente como deseaba.
Puede agregar una condición en su declaración de devolución tal que
{props.changeVisibilityEvent && <td> <Button variant="contained" onClick={() => changeCase('closeCase')}>fall schließen</Button> </td>} Tenga en cuenta que, en el caso anterior, props.changeVisibilityEvent debe ser un número entero para que 0 se resuelva como falso, mientras que 1 se resuelva como verdadero. Si es una cadena, puede escribir la condición como props.changeVisibilityEvent === '1'
Simplemente verifique el estado y, de acuerdo con este estado, puede cambiar alguna clase. (Compruebe si el estado es verdadero). Si 1 - agregar clase. Si es 0, elimina la clase.