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.