Question

我正在尝试构建一个将使用Material Design Lite的基本ReactJS应用程序。以下是React组件return()语句中的代码示例（使用Material文档中的演示内容）。它似乎不能正确呈现菜单项。当您单击菜单图标时，应该会弹出操作列表，但是这里什么也没有发生。如果放置在map()函数外部作为独立元素（进行了更改以使其变为静态），则它看起来没有问题。任何帮助调试将不胜感激！

预期输出：

Image

代码注释：
MDL doc for this component
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>
   )}

房间索引0的Live React DOM：

Screenshot

Answer 1

您需要返回一个包含所有内容的Javascript对象HTML / Jsx Tag。
使用您的实际功能，我想您将返回一个具有 room.length div的元素数组，即此元素 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>
   ))}

JSX映射对象的动态数组以显示MDL菜单

1 个答案: