Question

我试图用三元运算符编写类似的东西（由于jsx语法限制而需要）

if(!this.state.msg) {
    if(this.state.ask.length != 0) {
        // do stuff
    } else {
       // do stuff
    }
    if(this....) {
        //do stuff
    } else {
      // ...
    }
} else {
    //nothing
}

所以我尝试了这个愚蠢的

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

但它显然不是正确的方法。

任何帮助都非常欢迎。提前谢谢。

Answer 1

你断言JSX以这种方式限制你是错误的 - 阅读这个doc page你会发现你可以使用这样的东西：

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

Answer 2

也许它有助于添加另一个视角。您实际上需要使用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
  }
}

然后，您就可以在渲染方法中使用辅助函数。

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语句（常规或三元）编写的相同代码将更加详细。

Answer 3

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

writeKeys

或者，由于!this.state.msg ? ( this.state.ask.length != 0 ? /*stuff*/ : /*stuff*/, this... ? /* stuff */ : /* ... */ ) : /* nothing */分支正在执行＆＃34;没有＆＃34;，您可以用简单的替换顶层的三元运算符：

else

Answer 4

对于详细程度，表达清晰度和可维护性，我不建议将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)
:

Answer 5

可视化它有帮助。

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

javascript三元运算符＆＃34;链接＆＃34;

5 个答案: