|| （或）三元运算符在 JS 和 React 中不起作用答案

【问题标题】：|| (or) in ternary operator is not working in JS and React|| （或）三元运算符在 JS 和 React 中不起作用
【发布时间】：2020-05-21 08:27:42
【问题描述】：

我有以下三元组，它检查名为isChecked 的prop 是否为true。如果为真，则检查另一个 prop 是否为 true，如果为真，则使用该 prop，否则，它在对象中使用不同的变量：

props.isChecked ? '2px solid ' + props.theme || vars.blue : '2px solid ' + vars.black 
// if isChecked is true, check if theme is true, and if not use vars.blue, otherwise something else

vars.blue = "1778f2" | vars.black= "111111"

仅当我指定 theme 属性时它才有效，否则它将不起作用。这里有什么问题？

【问题讨论】：

试试括号。 (props.isChecked ? ('2px solid ' + props.theme)) || vars.blue : '2px solid ' + vars.black
不工作...
请添加变量的所有可能值。
检查Operator precedence 并在需要的地方使用括号。

标签： javascript reactjs conditional-operator

【解决方案1】：

我建议去掉后缀，使用三进制，不加相同的值。

'2px solid ' + (props.isChecked
    ? props.theme || vars.blue
    : vars.black
)

【讨论】：

【解决方案2】：

+ 最高的是operator precedence，然后是||，然后是条件运算符? ... :。

没有括号，您的代码将按如下方式计算：

props.isChecked ? (('2px solid ' + props.theme) || vars.blue) : ('2px solid ' + vars.black)

括号可以提供自定义的运算符顺序。添加以下内容：

//                               v--------------------------v
props.isChecked ? '2px solid ' + ( props.theme || vars.blue ) : '2px solid ' + vars.black

【讨论】：

【解决方案3】：

尝试使用模板字符串。

props.isChecked ? `2px solid ${props.theme || vars.blue}` : `2px solid ${vars.black}`

【讨论】：

它已经在模板字符串中。我正在使用样式组件。
使用这条线会得到什么结果？
当我单击它时，它应该将背景更改为它们（这是一种颜色），如果未指定，则为变量。但它只是行不通。它只是白色的。和一个黑色边框（点击前边框应该是黑色的）

【解决方案4】：

props.isChecked ? '2px solid ' + (props.theme ? vars.blue : vars.black) : ''

看看这个会起作用的

【讨论】：

【解决方案5】：

这里发生的事情是由operators precedence引起的。

+ 运算符的优先级高于||，因此'2px solid ' + props.theme || vars.blue 总是会先解析'2px solid ' + props.theme，然后将结果作为操作数传递给result || vars.blue。

无论如何，|| vars.blue 永远不会被解析，因为您的字符串总是以 2px solid 开头，因此永远不会是假的。

你可以这样修复你的三元表达式：

props.isChecked ? '2px solid ' + (props.theme || vars.blue) : '2px solid ' + vars.black;

现在对于代码样式，您应该尽可能避免将+ 运算符与字符串一起使用，并尽可能使用template literals：

const result = `2px solid ${props.isChecked ? props.theme || vars.blue : vars.black}`;

您不会在这里遇到运算符优先级问题，因为您不会以这种方式混合它们。

【讨论】：