Question

我正在看一些编码示例，并在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语句不能起作用？

Answer 1

{}之间必须有一个表达式。条件（三元）运算符对表达式求值；另一方面，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!");

Answer 2

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

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

2 个答案: