Soy un poco nuevo para reaccionar, leí este documento sobre ganchos y tengo una ventana emergente con la opción Mostrar más. La función mostrar más necesita mostrar un texto adicional cuando se hace clic y ocultarse después de que desaparece la ventana emergente.
la función popover es:
export default function Popover(props) {
const [viewDetails, setViewDetails] = useState(false);
return (
<div>
<h5>{props.title}</h5>
{viewDetails ?
'yes, more details here ...' : 'no'}
<span onClick={() => {setViewDetails(!viewDetails); console.log(viewDetails)}}>Show more</span>
</div>
);
}
y necesito una variable local simple que tendrá 'el estado' solo cuando el popover esté activo.
Por qué no puedo hacer algo como:
export default function Popover(props) {
let viewDetails = false;
return (
<div>
<h5>{props.title}</h5>
{viewDetails ?
'yes, more details here ...' : 'no'}
<span onClick={() => {viewDetails = !viewDetails; console.log(viewDetails)}}>Show more</span>
</div>
);
}
? Veo que el valor es siempre false cuando se muestra el popover y puedo configurarlo en verdadero al hacer clic, pero {viewDetails ? 'yes, more details here ...' : 'no'}no cambia
Una variable que no es una variable de estado no puede causar una re-renderización.
Puede resolver esto a través del estado de elevación .
Mueva la forma en que establece la vista al componente principal.
function Details(props) {
return (
<div>
<h5>{props.title}</h5>
<span>{props.details}</span>
</div>
);
}
function Popover(props) {
const [view, setView] = useState(false);
return (
<>
{ view && <Details details={props.details} /> }
<span onClick={() => setView(!view)}>
Show { view ? 'less': 'more' }
</span>
</>
);
}
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras