JSX语法的HTML代码中使用大括号是否会引发问题？

首先你记的JSX大括号规则本身没有错，但要先明确规则的生效边界：大括号作为JS表达式插值标记，仅在JSX标签的内部上下文生效，脱离JSX标签范围写的代码，属于普通JavaScript语法范畴，遵循原生JS的语法规则，和JSX插值逻辑无关。

你贴的示例代码如下：

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

逐段看上下文就能解释为什么不用写{element}：

• 前两行变量声明、ReactDOM.render函数调用本身都属于普通JavaScript代码，不在任何JSX标签的包裹范围内。render的第一个参数位置是原生JS的函数传参位，你已经提前把JSX元素存在了element变量里，直接传变量名完全符合JS语法，不需要额外套大括号。
• 代码里唯一符合JSX插值规则的大括号位置是<h1>Hello, {name}</h1>，这里的大括号在<h1>标签的子节点位置，属于JSX上下文，作用是告诉JSX编译器：不要把name当纯文本渲染，要取这个变量的值插入到页面里。

关于写成{element}会不会报错，要分场景判断：

• 如果是在当前示例的普通JS传参位置写ReactDOM.render({element}, document.getElementById('root'))，一定会报错。因为这里的大括号在原生JS语法里是对象字面量的简写，等价于传了{ element: element }这个普通对象，而ReactDOM.render的第一个参数要求接收React元素、Fragment或者Portal这类合法的React节点，传普通对象会触发经典的"Objects are not valid as a React child"类型错误。
• 只有当你把element写在另一个JSX标签内部的时候，才需要给它套大括号，比如要把现有element包在一层容器div里渲染，正确写法是：

ReactDOM.render(
  <div>{element}</div>,
  document.getElementById('root')
);

这时候大括号处在<div>标签的JSX上下文里，才是合法的JSX插值写法。

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