¿Hay alguna manera de expandir/contraer dinámicamente un PanelBar y/o PanelBarItems utilizando un accesorio?
export default function Vehicles(props) { <PanelBar style={props.style} expanded={props.expanded} > ... several PanelBarItems </PanelBar> }Este es más o menos mi PanelBar.
Lo que quiero hacer es crear una barra de "navegación" simple que enumerará todos los "contenidos" de PanelBar (los títulos de PanelBarItems). Debería expandir los PanelBarItem (s) en los que se hizo clic, lo que parece que no puedo hacer que suceda. Tengo una función que toma la tecla correspondiente a cualquier elemento que se supone que debe expandirse en función de la navegación y lo agrega a la matriz expandida.
Intenté pasar una serie de claves, como se muestra en los documentos , pero eso solo funciona en el renderizado inicial. Si paso expanded=[".0",".0.0"] , hará lo que espero y expandirá PanelBar y el primer elemento secundario. Si paso expanded=[] y luego agrego ".0" y ".0.0", las secciones no se expanden.
Hay un problema abierto sobre este problema exacto. No hay un modo controlado para PanelBar. La única forma de "abrirlos dinámicamente" y cerrarlos es actualizar la clave y forzar un nuevo montaje. Acabo de usar key={props.expanded.toString()} para forzar la actualización del componente.
Si, puedes hacerlo. El elemento se expande cuando prop expanded={true} .
Así que pase a los accesorios de componentes de Vehicles en esta forma.
const expanded = { item1: true, item2: false, // etc. }Entonces usa
`expanded={pros.expanded.item1}`