Estoy intentando crear un menú desplegable que muestre el nombre del elemento seleccionado actualmente, donde la cantidad de elementos se extrae de un archivo json que se almacena localmente. Encontré esta publicación: enlace , sin embargo, esto se refiere al componente de formulario, y también parece estar desactualizado en referencia a cómo usar la versión actual de react-bootstrap.
Intenté construir una cadena e inyectar la cadena, pero eso obviamente no funciona. No pude encontrar ninguna información sobre la creación dinámica de una serie de elementos desplegables en los documentos.
import DropdownButton from 'react-bootstrap/DropdownButton'; import Dropdown from 'react-bootstrap/Dropdown'; import SponsorManager from './SponsorManager'; const sponsorManager = new SponsorManager(); function App() { var sponsorIds = sponsorManager.getSponsors(); var dropdowns = "" for (const [key, value] of Object.entries(sponsorIds)) { var dropdowntemplate = `<Dropdown.Item href="#/action-1">${value.displayName}</Dropdown.Item>\n` dropdowns += dropdowntemplate; } return ( <React.Fragment> <div> <DropdownButton id="dropdown-basic-button" title="Dropdown button"> {dropdowns} </DropdownButton> </div> </React.Fragment> ); }Descubrí que en realidad había una respuesta que parecía funcionar para mí desde ese enlace. Usando eso, se me ocurrió esta solución que realmente me gusta y está encapsulada:
import React from 'react'; import DropdownButton from 'react-bootstrap/DropdownButton'; import Dropdown from 'react-bootstrap/Dropdown'; class DynamicDropdown extends React.Component { constructor(props) { super(props); this.state = { selected: this.props.items[0].displayName, items: this.props.items }; } changeSelected(selected) { this.setState({ selected: selected }); } render() { let itemDisplays = this.state.items.map(v => ( <Dropdown.Item as="button" key={v.id} value={v.id} ><div onClick={(e) => this.changeSelected(e.target.innerText)}>{v.displayName}</div></Dropdown.Item> )); return ( <div> <DropdownButton id="dropdown-basic-button" title={this.state.selected}> {itemDisplays} </DropdownButton> </div> ); } } export default DynamicDropdown;