Question

根据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/

我的语法是关闭还是可以更优雅地完成？

Answer 1

小提琴似乎不起作用，但我可以重现这种行为。虽然它没有引起Adjacent JSX elements must be wrapped in an enclosing tag错误，但我怀疑这可能是它不起作用的原因，因为相邻元素实际上是你想要做的。

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

Answer 2

您还可以返回一组JSX组件，例如

{ 
  toggleDeleteDialogs ?
  [<Button ... />, <Button ... />] :
  <Button .../> 
}

Answer 3

@Adam Stone是正确的，问题是相邻的JSX元素没有包含在结束标记中。

那就是说，你要求最优雅的方法来解决这个问题。

我对您的代码进行了以下更改：

使用此函数有选择地隐藏JSX元素：

var hideIfFalse=function(boolean){
      return boolean? {} : {display : 'none'};
 };

你可以这样使用：

<div style={hideIfFalse(toggleDeleteDialogs)} />

将用于呈现列表项的逻辑分离为renderChildren方法：

renderChildren:function(notes,classes){
  return  notes.map(function (note) {
  //...

制作了DeleteDialog组件。它具有可重用的功能和自己的渲染逻辑，并将其分离可提高代码可读性：

var DeleteDialog=React.createClass({
  render:function(){
    var classes=this.props.classes;

    return <div style={hideIfFalse(this.props.toggleDeleteDialogs)}>
          <button onClick={this.props.onDelete} className="half">
            Yes
          </button>,
          <button className="half" onClick={this.props.onCancelDelete}>
            No
          </button>
    </div>
  }
});

我没有触及classSet逻辑，但不明白它应该做什么。

Putting it all together：

   var hideIfFalse=function(boolean){
        return boolean? {} : {display : 'none'};
    };

    var notepad = {
      notes:
      [
          {
              id: 1,
              content: "Hello, world!\nBoring.\nBoring.\nBoring."
          },
          {
              id: 2,
              content: "React is awesome.\nSeriously, it's the greatest."
          },
          {
              id: 3,
              content: "Robots are pretty cool.\nRobots are awesome, until they take over."
          },
          {
              id: 4,
              content: "Monkeys.\nWho doesn't love monkeys?"
          }
      ],
      selectedId: 1
    };

    var DeleteDialog=React.createClass({
      render:function(){
        var classes=this.props.classes;

        return <div style={hideIfFalse(this.props.toggleDeleteDialogs)}>
              <button onClick={this.props.onDelete} className="half">
                Yes
              </button>,
              <button className="half" onClick={this.props.onCancelDelete}>
                No
              </button>
        </div>
      }

    })

    var NotesList = React.createClass({
      getInitialState: function() {
        return {
          isConfirming: false
        };
      },

      onSelectNote: function(id) {
          notepad.selectedId = id;
      },

      deleteThisNote: function(noteId) {
        if(this.state.isConfirming) {
          // actual delete functionality should be here
          this.setState({isConfirming: false});
        }
        else {
          this.setState({isConfirming: true});
        }
      },

      onCancelDelete: function() {
        this.setState({ isConfirming: false });
      },
      renderChildren:function(notes,classes){
        return  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}
                            <button key={note.id} onClick={this.deleteThisNote.bind(null, note.id)} className="full" disabled={disableDelete ? "disabled" : ""}>Delete Note</button>
                            <DeleteDialog
                            toggleDeleteDialogs={toggleDeleteDialogs}
                            note={note}
                            onDelete={this.deleteThisNote.bind(null, note.id)}
                            onCancelDelete={this.onCancelDelete.bind(this)} />
                         </li>
                }.bind(this))
      },

      render: function() {
        var notes = notepad.notes;
        var cx = React.addons.classSet;
        var classes = cx({
          "topcoat-button-bar__button": true,
          "full": !this.state.isConfirming,
          "half": this.state.isConfirming,
        });

        return (
          <div className="topcoat-list">
            <ul className="topcoat-list__container">
              {this.renderChildren(notes,classes)}
            </ul>
          </div>
        );
      }
    });

    React.render(<NotesList />, document.getElementById('container'));

JSFiddle：http://jsfiddle.net/55fvpcLo/2/

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

3 个答案: