React组件中if语句条件（props）为何无需放在大括号中？

核心原因是大括号只在JSX标签内部的特定场景需要用，咱们分两部分理清楚：

• 函数体里的普通JS代码，不用大括号
  示例里的if (size > 90)属于Avatar函数的主体逻辑，是纯JavaScript代码块，和你写普通JS函数的规则完全一致——直接用变量名size就行，不需要额外包裹大括号。这里的size是通过解构props拿到的普通JS变量，和你用const size = props.size声明的变量没有区别。

• JSX标签内部才需要大括号
  再看width={size}这种写法，这是在JSX的<img>标签属性里。JSX本质是模板语法，默认会把内容当成字符串处理，如果你要在里面插入JS表达式（比如变量、函数调用），就必须用{}把JS代码包起来，告诉React：“这不是字符串，是要执行的JS代码”。如果这里写成width="size"，React就会把它当成字符串"size"，而不是变量size的实际值。

举个直观对比：

• 纯JS代码（函数体里）：let num = size + 10; → 直接使用变量size
• JSX内部：<div>{size + 10}</div> → 必须用大括号包裹表达式

只要分清JSX模板和普通JS代码的边界，就不会再混淆啦。

内容的提问来源于stack exchange，提问作者Chan Karunaratne