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

它需要花括号，因为 headerText 是 props 对象上的属性名称。如果你把它写成 <span>headerText</span> ，它会将 headerText 呈现为文字字符串，而不是 <Editor headerText='text value' />
作为道具传递的值 注意：从技术上讲，渲染不带引号的字符串是 babel 而不是 React 的一个特性，但 React 默认带有 babel，我相信如果你不使用 babel，它就会无效 javascript

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

这是一个非常简单的例子来说明两者的区别。只需取消注释第二个 return 并注释第一个即可看到它们的变化。

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

Answer 2

Why curly braces are required when passing a simple string into a react functional component

这是设计使然。

考虑在另一个组件中调用 Editor 的时间：

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

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

该对象将具有单个字符串 headerText 和调用时传递的值，但是您的组件无法保证传入的道具 ONLY 具有奇异值。

考虑一下你的组件是不是这样使用的

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

Javascript 参数周围的大括号

Javascript Curly Braces Around Parameters

javascript

reactjs

object-destructuring