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

Question

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

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 属性时它才有效，否则它将无效。这里有什么问题？

Answer 1

尝试使用模板字符串。

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

Answer 2

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

看看这个是否可行

Answer 3

+最高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

Answer 4

这里发生的事情是由operators precedence造成的。

+运算符的优先级高于||，所以'2px solid ' + props.theme || vars.blue总是会先解析'2px solid ' + props.theme，然后将结果作为操作数传递给[=16] =].

在任何情况下，|| 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}`;

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

Answer 5

我建议去掉后缀，用三元不加同值

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

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

|| (or) in ternary operator is not working in JS and React

javascript

conditional-operator

reactjs