reactjs - navs - Cómo hacer un menú desplegable Bootstrap con React

react-bootstrap dropdown

Question

Soy un noobie en React y estoy tratando de hacer un menú desplegable de Bootstrap . El html que estoy adjuntando está aquí:

<ul class="dropdown-menu" id="dropdown">
</ul>

Y esto es lo que quiero poner en mi método de render para insertar dentro de mi html:

render: function() {
return (
<li><a href="#books">Books</a></li>
<li><a href="#podcasts">Podcasts</a></li>
<li><a href="#">Tech I Like</a></li>
<li><a href="#">About me</a></li>
<li><a href="#addBlog">Add a Blog</a></li>
);
}

Pero claro que solo puedo devolver un elemento. ¿Cuál es la forma correcta de hacer esto en React ? ¿Cómo podría agregar múltiples <li> en un menú desplegable como este? Intenté envolver todo en <div> , pero eso confunde mi css.

Answer 1

Desafortunadamente, esta es una situación en la que la capacidad de React de devolver solo un nodo desde el render es molesta. Su mejor apuesta es probablemente devolver el <ul> sí del render:

render: function() {
return (
<ul className="dropdown-menu" id="dropdown">
<li><a href="#books">Books</a></li>
<li><a href="#podcasts">Podcasts</a></li>
<li><a href="#">Tech I Like</a></li>
<li><a href="#">About me</a></li>
<li><a href="#addBlog">Add a Blog</a></li>
</ul>
);
}

luego renderiza todo el componente en otro contenedor como un <div> . En una versión futura de React, esperamos eliminar esta restricción para que funcione algo como su código original.

Answer 2

Puede usar el componente react-select reaccionar. Es muy simple y fácil de usar.

var Select = require(''react-select'');
var options = [
{ value: ''one'', label: ''One'' },
{ value: ''two'', label: ''Two'' }
];
function logChange(val) {
console.log("Selected: " + val);
}
<Select
name="form-field-name"
value="one"
options={options}
onChange={logChange}
/>

Answer 3

reaccionar bootstrap hace que trabajar con reaccionar y bootstrap sea un poco más fácil:

render: function(){
return (
<DropdownButton title="Dropdown">
<MenuItem href="#books">Books</MenuItem>
<MenuItem href="#podcasts">Podcasts</MenuItem>
<MenuItem href="#">Tech I Like</MenuItem>
<MenuItem href="#">About me</MenuItem>
<MenuItem href="#addBlog">Add a Blog</MenuItem>
</DropdownButton>
);
}

Esto parece casi igual, pero tiene controladores de eventos y agrega todas las clases correctas. Sin embargo, como dijo @ sophie-alpert, el render debe devolver un solo elemento padre DOM.