Javascript参数周围的大括号

Question

我现在正在学习react和javascript，我正在努力理解为什么在将一个简单的字符串传递到react功能组件时需要花括号，像这样:

function Editor({ headerText }) {

return (
<div className="title">
<span>{headerText}</span>
</div>
);
}
export default Editor;

我理解对象解构的概念。然而，headertext参数只是接收一个基本字符串。如果headerText只是一个基本字符串，那么它甚至不需要花括号，为什么在试图删除花括号时出现语法错误?

实际上，react文档中有一个类似的函数，甚至不使用大括号:

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

那么为什么当参数接收一个简单的字符串值时，我的代码片段需要花括号呢?

Answer 1

为什么在向react功能组件传递简单字符串时需要花括号

这是故意的。

考虑在另一个组件中调用Editor的情况:

function MyComponent() {
return(
<Editor headerText="Header"/>
)
}

当React调用Editor函数时，它传入一个对象，称为props。

该对象将具有单个字符串headerText和调用时传递的值，但是您的组件不能保证传入propsONLY具有奇异值

考虑你的组件是否像这样使用

function MyAwesomerComponent() {
return(
<>
{[1,2,3,4,5].map(i=>
<Editor key={i} env="production" headerText="Header"/>
)}
</>
)
}

Answer 2

需要花括号，因为headerText是props对象上的属性名。如果你把它写为<span>headerText</span>，它会把headerText渲染成一个文字字符串，而不是<Editor headerText='text value' />传递给props的值
注意:渲染没有引号的字符串在技术上是babel的一个功能，而不是React，但React默认自带babel，我相信如果你不使用babel，它将是无效的javascript

当你使用<span>{headerText}</span>时，这实际上是抓取变量headerText并在span标签中呈现该值。

这里有一个非常简单的例子来说明两者的区别。只需取消第二个返回的注释，并注释第一个返回的注释，就可以看到它们的变化。

https://codesandbox.io/s/friendly-babycat-rqzo9?file=/src/Test.js