Question

我遇到了以下代码：

{{1}}

你如何阅读第2行的三元运算符？

Answer 1

正如其中一条评论所说，您应该将其转换为传统的if-else树，以提高可读性/健全性。但是，它会像这样读到（为了简洁起见，我没有逐字写出来，但你得到了要点）：

if (!conditionOne) {
    if (conditionTwo) {
        return invariant(false, 'ReactClass...', name);   
    }
    else {
        return invariant(false);
    }
}
else {
   return undefined;
}

我想通过将代码转换为if-else树来回答这个问题可能会帮助您更轻松地理解它：）

Answer 2

有两个三元运算符。看看这种形成方式是否有帮助：

!(specPolicy === SpecPolicy.DEFINE_MANY || specPolicy === SpecPolicy.DEFINE_MANY_MERGED) ? 
    process.env.NODE_ENV !== 'production' ? 
        invariant(false, 'ReactClassInterface: You are attempting to define ' + '`%s` on your component more than once. This conflict may be due ' + 'to a mixin.', name) : 
        invariant(false) : 
    undefined;

Answer 3

您可以使用适当的缩进。最内在的三元组合在一起，如

condition1 ? condition2 ? value1 : value2 : value3

与

相同

condition1 ? (condition2 ? value1 : value2) : value3

使用您的代码;

!(specPolicy === SpecPolicy.DEFINE_MANY || specPolicy === SpecPolicy.DEFINE_MANY_MERGED) ? 
    process.env.NODE_ENV !== 'production' ? 
        invariant(false, 'ReactClassInterface: You are attempting to define ' + '`%s` on your component more than once. This conflict may be due ' + 'to a mixin.', name) :
        invariant(false) :
    undefined;

Answer 4

尝试格式化代码缩进以便更好地理解。

if (proto.hasOwnProperty(name)) {
    !(
        specPolicy === SpecPolicy.DEFINE_MANY //1
        ||
        specPolicy === SpecPolicy.DEFINE_MANY_MERGED //1
    ) ?
        process.env.NODE_ENV !== 'production' ? //2
            invariant(false, 'ReactClassInterface: You are attempting to define ' + '`%s` on your component more than once. This conflict may be due ' + 'to a mixin.', name) :
            invariant(false)//3
        : undefined;//4
}

（1）如果specPolicy既不是SpecPolicy.DEFINE_MANY也不是SpecPolicy.DEFINE_MANY_MERGED，那么请检查process.env.NODE_ENV是否不是“生产”。（2）如果是，则调用invariant(false, 'Re....，否则调用（3）invariant(false)。如果（1）为真，则返回undefined（4）。

读取多个三元运算符条件

4 个答案: