javascript - 在React JSX中有条件地渲染组件部分

根据MDN的说法，“对于每种情况，您还可以执行多个操作，并用逗号将它们分开。”下面的示例起作用：

var stop = false, age = 23;

age > 18 ? (
    alert("1"),
    alert("2")
) : (
    stop = true,
    alert("Sorry, you are much too young!")
);

但是我似乎无法在React中做如下所示的事情。我希望同时显示“是”和“否”按钮，但是它只显示“否”按钮。

return (
  <div className="topcoat-list">
    <ul className="topcoat-list__container">
    {
      notes.map(function (note) {
        var title = note.content.substring(0, note.content.indexOf("\n"));
title = title || note.content;
        var toggleDeleteDialogs = this.state.isConfirming && note.id === notepad.selectedId;
        var disableDelete = this.state.isConfirming && note.id !== notepad.selectedId;

          return (
          <li key={note.id} onClick={this.onSelectNote.bind(null, note.id)} className="topcoat-list__item">
            {title}

            {
              toggleDeleteDialogs ?
              (
                <button key={note.id} onClick={this.deleteThisNote.bind(null, note.id)} className="half">Yes</button>,
                <button className="half" onClick={this.onCancelDelete}>No</button>
              ) : (
              <button key={note.id} onClick={this.deleteThisNote.bind(null, note.id)} className="full" disabled={disableDelete ? "disabled" : ""}>Delete Note</button>
              )
            }

          </li>

        );
      }.bind(this))
    }
    </ul>
  </div>
);

完整标记：https://jsfiddle.net/55fvpcLo/

我的语法是否正确，还是可以更优雅地完成？

最佳答案

小提琴似乎没有用，但是我可以重现这种行为。尽管它不会引发Adjacent JSX elements must be wrapped in an enclosing tag错误，但我怀疑这可能是它不起作用的原因，因为相邻元素实际上是您要尝试执行的操作。

我认为最简单的解决方案是将两个元素包装在一个封闭的标签中，而不是括号中。