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

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

jsx reactjs javascript

Hans Zimermann · 技术社区 · 6 年前

为什么在下面的开始片段中 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 回复 | 直到 6 年前

thismarcoantonio 6 年前

使用时:

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

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

否则,使用时:

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

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

Shubham Khatri 6 年前

在第一种情况下:

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

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

而在第二种情况下,

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

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

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

推荐文章

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Agrim Singh · 对象无效,因为使用React router dom时显示React子错误

1 年前

Anaya Ammar · 渲染后未显示的值

1 年前

matin kahrizi · 当我的状态更改时,useSelector不更新

1 年前

YotiPoti · 我的照片太大了,无法容纳我的HTML画布。我该怎么办?

1 年前

Zemelon · -moz背面可见性不适用于顺风css

1 年前

Abdelaziz Elrasheed · 如何成为专业的网页开发人员。。。?[已关闭]

1 年前

JustTrynaProgram · React和Tailwind-从配置中读取自定义断点值

1 年前

Mark C. · 制作一个可松开的单选按钮[关闭]

1 年前

Tridip Lodh · 在ES6中,JAVASCRIPT函数在“严格使用”模式下的行为如何?[已关闭]

1 年前