Как создать раскрывающийся список Bootstrap с помощью React

Я noobie в React, и я пытаюсь создать раскрывающийся список Bootstrap. Html, к которому я прикрепляюсь, находится здесь:

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

И вот что я хочу поместить в мой метод render для вставки внутри моего 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>
    );
}

Но, конечно, я могу вернуть только один элемент. Каков правильный способ сделать это в React? Как я могу добавить несколько <li> в раскрывающийся список, как это? Я попробовал обернуть все это в <div>, но это испортило мой css.

Ответы

Ответ 1

"Реактивный бутстрап" упрощает работу с "Реакцией и бутстрапом"

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

Это выглядит примерно так же, но имеет обработчики событий и добавляет все нужные классы. Как сказал @sophie-alpert, render должен возвращать один родительский элемент DOM.

Ответ 2

К сожалению, это одна из ситуаций, когда способность React возвращать только один node из render раздражает. Лучше всего, вероятно, вернуть сам <ul> из рендера:

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

затем переведите весь компонент в другой контейнер, например, <div>. В будущей версии React мы надеемся удалить это ограничение, чтобы что-то вроде вашего исходного кода работало.

Ответ 3

Вы можете использовать react-select компонент component.It очень прост и прост в использовании.

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