JSX Отображение динамического массива объектов для отображения меню MDL - PullRequest
Новая
       20

JSX Отображение динамического массива объектов для отображения меню MDL

0 голосов
/ 09 октября 2018

Я пытаюсь создать базовое приложение ReactJS, которое будет использовать Material Design Lite.Ниже приведен пример кода (с использованием демонстрационного контента из документации по материалам) из инструкции React component return().Кажется, он не отображает пункты меню должным образом.При нажатии на значок меню должен появиться список действий, но здесь ничего не происходит.Если поместить его вне функции map() как отдельный элемент (с изменениями, сделавшими его статичным), он появится без проблем.Любая помощь отладки приветствуется!

Ожидаемый результат:

Изображение

Примечания кода:
Документ MDL для этого компонента
this.state.rooms = [{Obj 1}, {Obj 2}, {Obj 3}]
ключи уникальны для каждого объекта и ужесвойство 

{this.state.rooms.map( room => {
  return (
    <div className="room-row" key={room.key}>
      <button id={"demo-menu-lower-left" + room.key} className="mdl-button mdl-js-button mdl-button--icon">
        <i className="material-icons">more_vert</i>
      </button>

      <ul className="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" htmlFor={"demo-menu-lower-left" + room.key}>
        <li className="mdl-menu__item">Some Action</li>
        <li className="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
        <li disabled className="mdl-menu__item">Disabled Action</li>
        <li className="mdl-menu__item">Yet Another Action</li>
      </ul>
    </div>
   )}

Live React DOM индекса комнаты 0:

Снимок экрана

1 Ответ

0 голосов
/ 09 октября 2018

Вам необходимо вернуть один объект Javascript HTML / Jsx Tag, содержащий все содержимое.
С вашей действительной функцией, я полагаю, вы возвращаете массив элементов с room.length divs,будучи этим элементом room .
Попробуйте вернуть только один объект, который имеет все элементы div, например: 

{ var renderedDivs = [];

  renderedDivs = this.state.rooms.map( room => {
      return (
        <div className="room-row" key={room.key}>
          <button id={"demo-menu-lower-left" + room.key} className="mdl-button mdl-js-button mdl-button--icon">
        <i className="material-icons">more_vert</i>
      </button>

      <ul className="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" htmlFor={"demo-menu-lower-left" + room.key}>
        <li className="mdl-menu__item">Some Action</li>
        <li className="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
        <li disabled className="mdl-menu__item">Disabled Action</li>
        <li className="mdl-menu__item">Yet Another Action</li>
      </ul>
    </div>
   )
  return renderedDivs

}

Или другоеэто может сработать: 

{return (this.state.rooms.map( room => {
  return (
    <div className="room-row" key={room.key}>
      <button id={"demo-menu-lower-left" + room.key} className="mdl-button mdl-js-button mdl-button--icon">
        <i className="material-icons">more_vert</i>
      </button>

      <ul className="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" htmlFor={"demo-menu-lower-left" + room.key}>
        <li className="mdl-menu__item">Some Action</li>
        <li className="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
        <li disabled className="mdl-menu__item">Disabled Action</li>
        <li className="mdl-menu__item">Yet Another Action</li>
      </ul>
    </div>
   ))}
...