javascript三元运算符“；“链接”；

我正试图用三元运算符编写类似的内容（由于jsx语法约束而需要）

所以我试过这个哑巴

   !this.state.msg ? this.state.ask.length != 0 ? //do stuff : "" this.state... ? //do stuff : //do other stuff : //nothing

但这显然不是正确的方向

欢迎任何帮助。提前感谢。

可视化它会有所帮助

    !this.state.msg ?
                        ? this.state.ask.length != 0) 
                              // do stuff
                        :
                              // do stuff
                     :
                     this.... ?
                               //do stuff
                              :
                                // ...

---

你真正的分支有两个组成部分；可以用逗号分隔它们（括号中，因为逗号的关联性比三元运算符弱）。所以

或者，由于

else

分支“什么也不做”，您可以用一个简单且简单的

!this.state.msg &&
  (
    this.state.ask.length != 0 ? /*stuff*/ : /*stuff*/,
    this... ? /* stuff */ : /* ... */
  )

---

您认为JSX以这种方式限制您的说法是错误的-阅读此内容，您将看到您可以使用以下内容：

{(() => {
// My awesome multi-step code
})()}

render: function() {
  return (
    condition === 'example' ?
      <MyComponent attr={this.props.example} onChange={this.props.onChange} /> :
      <MyOtherComponent attr={this.state.example} onChange={this.state.onChange}/>
   );
}

helper: function(condition) {
  if(condition === 'example') {
    return (
      <MyComponent attr={this.props.example} onChange={this.props.onChange} />
    );
  }

  else {
    return (
      <MyOtherComponent attr={this.state.example} onChange={this.state.onChange}/>
    );
  }
},
render: function() {
  return this.helper(condition);
}

---

对于冗长、清晰的表达和可维护性，我不建议将if-else转换为三元表达。尽量保持代码简单，即使是以牺牲几行额外代码为代价

如果你只是想学习，就在这里

!this.state.msg ? 
  (this.state.ask.length != 0 ? //do if stuff : //do else stuff),
  (this.some == 0 ? //do 2nd if stuff : //do 2nd else stuff)
:

---

也许这会有助于增加另一个视角。在JSX中使用三元运算符是非常罕见的。在这种情况下，我会考虑把所有的逻辑移出一个单独的函数。

helperFunction: function() {
  if(!this.state.msg) {
    if(this.state.ask.length != 0) {
      // return stuff
    } else {
      // return stuff
    }

    if(this....) {
      // return stuff
    } else {
      // ...
    }
  } else {
    // nothing
  }
}

然后，您就可以从渲染方法内部使用helper函数

React.createClass({
  helperFunction: function() {
    // ...
  },
  render: function() {
    return (
      <div>
       {this.helperFunction()}
      </div>
    );
  }
});

React.createClass({
helperFunction:function（）{
// ...
},
render:function（）{
返回(
{this.helperFunction（）}
);
}
});

helper函数可以返回可用于属性的值，也可以返回其他JSX组件。我经常发现，将代码移出如下模式很有帮助：

{(() => {
// My awesome multi-step code
})()}

render: function() {
  return (
    condition === 'example' ?
      <MyComponent attr={this.props.example} onChange={this.props.onChange} /> :
      <MyOtherComponent attr={this.state.example} onChange={this.state.onChange}/>
   );
}

helper: function(condition) {
  if(condition === 'example') {
    return (
      <MyComponent attr={this.props.example} onChange={this.props.onChange} />
    );
  }

  else {
    return (
      <MyOtherComponent attr={this.state.example} onChange={this.state.onChange}/>
    );
  }
},
render: function() {
  return this.helper(condition);
}

render:function（）{
返回(
条件=='示例'？
:
);
}

要编写如下所示的代码：

{(() => {
// My awesome multi-step code
})()}

render: function() {
  return (
    condition === 'example' ?
      <MyComponent attr={this.props.example} onChange={this.props.onChange} /> :
      <MyOtherComponent attr={this.state.example} onChange={this.state.onChange}/>
   );
}

helper: function(condition) {
  if(condition === 'example') {
    return (
      <MyComponent attr={this.props.example} onChange={this.props.onChange} />
    );
  }

  else {
    return (
      <MyOtherComponent attr={this.state.example} onChange={this.state.onChange}/>
    );
  }
},
render: function() {
  return this.helper(condition);
}

helper:函数（条件）{
如果（条件==‘示例’）{
返回(
);
}
否则{
返回(
);
}
},
render:function（）{
返回此.helper（条件）；
}

或者在字符串相等性检查的情况下更好

helper: function(condition) {
  const default = <MyOtherComponent attr={this.state.example} onChange={this.state.onChange}/>

  const conditions = {
    example: <MyComponent attr={this.props.example} onChange={this.props.onChange} />,
    example2: <MyComponent attr={this.props.example} onChange={this.props.onChange} />,
    example3: <MyComponent attr={this.props.example} onChange={this.props.onChange} />,
  };

  return conditions[condition] || default;
},
render: function() {
  return this.helper(condition);
}

helper:函数（条件）{
常量默认值=
常数条件={
示例：，
例二：，
例三：，
};
返回条件[条件]| |默认值；
},
render:function（）{
返回此.helper（条件）；
}

---

这种方式可以让您充分利用switch语句的强大功能，但语法也更简洁，它可以让您优雅地从大量条件组件中进行选择。使用if语句（常规或三元）编写的代码会更加冗长。

只需将if替换为“？”，将else替换为“：”。OI将为您编写。您的原始代码不是“三元代码”，因为初始的

if

没有

else

。确实，我编辑了，但仍然不工作。请不要这样做JSX语法不允许我进行其他选择。我总是将它们可视化，并交换语句。这就是它的全部，就是简写。不幸的是，这与原始代码的逻辑不同。当

this.state.ask.length！=0

不是真的，但在原始代码中，当条件为真时，第二部分作为第二条语句执行。我后来意识到，他们只是在问如何解释逻辑。我真的应该把它去掉。感谢事实上，我不认为有一种方法可以在三元语句中执行而不拆分它。事实上，我把它拆分了，所以它现在是合法的三元语法，而且它是有效的。如果有一个解决方案尊重最初的逻辑，请让我知道，但现在这是我的正确答案。谢谢。是的，这是我通常做的，实际上我的代码的一部分是这样做的，我扩展了jsx的一部分，却懒得把它去掉…=/但是是的，这是正确的选择sure@rollingBalls顺便说一句，在你发表评论和帖子之前，从来没有听说过JSX。所以，当然，我用谷歌搜索了一下，谢谢！