不能在 const 声明中使用 if 语句，但三元运算符有效[重复]

Posted 2023-02-21

【中文标题】不能在 const 声明中使用 if 语句，但三元运算符有效[重复]

【英文标题】：Can't use if statement inside const declaration, but ternary operator works [duplicate]

【发布时间】：2019-10-30 01:17:41

【问题描述】：

我正在浏览一些编码示例，并遇到了 React 中组件声明的一个示例：

export const TodoList = ( todos ) => (
    <ul>
        
            todos && todos.length
            ? todos.map((todo, index) => 
                return <Todo key=`todo-$todo.id` todo=todo />
            )
            : "No todos, yay!"
        
    </ul>
);

我想尝试将这个三元运算符转换为 if/else 语句，如下所示：

export const TodoList = ( todos ) => (
    <ul>    
        
            if (todos) && (todos.length) 
                todos.map((todo, index) => 
                    return <Todo key=`todo-$todo.id` todo=todo />
                )
             else 
                "No todos, yay!"
            
        
    </ul>
);

但是，我在if 语句开始的那一行得到错误：

解析错误：意外的令牌

为什么三元运算符在这里有效，而 if 语句却无效？

【问题讨论】：

… 包装一个表达式，如2 + 2 或x ? y : z。 if 语句是语句，而不是表达式。

啊..我不知道这个。谢谢

无论如何它必须是if (todos && todos.length)。括号是if 语法的一部分。

【参考方案1】：

s 之间的内容必须是表达式。条件（三元）运算符的计算结果为表达式；另一方面，if 是一个不能作为表达式求值的语句。出于类似的原因，这是无效的：

const foo = if (true) 
  'bar'

见If-Else in JSX:

if-else 语句在 JSX 中不起作用。这是因为 JSX 只是函数调用和对象构造的语法糖。举个基本的例子：

// This JSX:
ReactDOM.render(<div id="msg">Hello World!</div>, mountNode);

// Is transformed to this JS:
ReactDOM.render(React.createElement("div", id:"msg", "Hello World!"), mountNode);

这意味着 if 语句不适合。举个例子：

// This JSX:
<div id=if (condition)  'msg' >Hello World!</div>

// Is transformed to this JS:
React.createElement("div", id: if (condition)  'msg' , "Hello World!");

【参考方案2】：

if 语句是流控制，而三元运算符是简单的运算符。 if 语句需要代码，三元运算符需要值。