web-dev-qa-db-fra.com

Comment faire une liste déroulante Bootstrap avec React

Je suis un noobie chez React et j'essaye de faire une liste déroulante Bootstrap. Le html auquel je joins est ici:

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

Et voici ce que je veux mettre dans ma méthode render pour insérer à l'intérieur de mon 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>
    );
}

Mais bien sûr, je ne peux renvoyer qu'un élément. Quelle est la bonne façon de procéder dans React? Comment pourrais-je ajouter plusieurs <li> est dans une liste déroulante comme celle-ci? J'ai essayé d'envelopper le tout dans un <div>, mais cela gâche mon CSS.

reactjs
22
jhamm

react bootstrap rend le travail avec react & bootstrap un peu plus facile:

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>
  );
}

Cela ressemble à peu près, mais a des gestionnaires d'événements et ajoute toutes les bonnes classes. Comme l'a dit @ sophie-alpert, render doit renvoyer un seul élément parent DOM.

20
konsumer

Malheureusement, il s'agit d'une situation où la capacité de React à renvoyer un seul nœud à partir de render est ennuyeuse. Votre meilleur pari est probablement de retourner le <ul> lui-même depuis le rendu:

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>
  );
}

puis rendre ce composant entier dans un autre conteneur comme un <div>. Dans une future version de React nous espérons supprimer cette restriction pour que quelque chose comme votre code d'origine fonctionne.

9
Sophie Alpert

Vous pouvez utiliser react-select react component.It est très simple et facile à utiliser.

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}
/>
2
WitVault