Javascript三元运算符&;chaining&;

真正的分支有两个组件;可以用逗号分隔它们(括号括起来，因为逗号的结合性比三元运算符弱)。所以

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

或者，由于else分支"什么都不做"，您可以将顶层的三元操作符替换为简单的and:

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

您断言JSX以这种方式限制您是错误的-阅读此文档页面，您将看到您可以使用这样的内容:

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

也许添加另一个视角会有所帮助。在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>
    );
  }
});

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

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: 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);
}

这种方式为您提供了switch语句的大部分功能，但语法也更简洁，它允许您从大量条件组件中优雅地进行选择。使用if语句(常规或三元)编写的相同代码将更加冗长。

考虑到冗长、表达式的清晰度和可维护性，我不建议将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)
:

将其可视化会有所帮助。

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