代码之家 › 专栏 › 技术社区 › Hans Zimermann

React或JSX中卷曲和圆括号之间的差异

jsx reactjs javascript

Hans Zimermann · 技术社区 · 7 年前

为什么在下面的开始片段中 const user 用大括号包起来 const element 是否用括号括起来?

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

2 回复 | 直到 7 年前

thismarcoantonio 7 年前

使用时:

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

您正在使用 JSX ,它提供了一种类似Javascript XML的语言,就像一个预处理器。

否则,使用时:

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

您正在创建一个普通的Javascript对象,您可以在其中存储数据并像 user.firstName 或 user.lastName 。

Shubham Khatri 7 年前

在第一种情况下:

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

用户是 object 具有 key: value 配对,因此 {}

而在第二种情况下,

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

包装在中的多行JSX表达式 () 增加代码的可读性,以及 per the docs ,则,

建议用括号括起来,以避免 automatic semicolon insertion 。

推荐文章

Minchan Jung · 当React中的文本内容更改时,如何更新div

2 年前

niksaexe · 在具有默认图片的情况下,使用onMouseEnter更改React中的img源

2 年前

Berendschot · 将条件类与静态类NextJS相结合

2 年前

Jonas · 反应挂钩-编辑后更新列表中的项目

2 年前

Brian Highforce Thomas · 未能在React中映射属性值。js和Typescript

2 年前

william007 · 使用useRef获取活动背景色

2 年前

jenzhng · 我如何让这个flex容器包装在React中?

3 年前

Demetris · 如何在音频播放器中传递React道具?

3 年前

Dylan L. · 为什么更新的状态没有返回到我的组件?

3 年前

twominds · 鼠标离开元素,鼠标进入另一个元素不会重置状态

3 年前