React函数组件传递简单字符串参数时为何参数需要用花括号包裹

核心原因：React组件的传参规则和普通JS函数不同 #

• React函数组件永远只会接收1个参数：这个参数是包含所有传入属性的props对象，是React框架自动封装的。
  当你在JSX中调用组件 <Editor headerText="这是标题" /> 时，React会把所有你写的属性打包成一个对象 {headerText: "这是标题"}，作为唯一参数传给Editor函数，哪怕你只传了一个字符串类型的属性，也不会直接把字符串作为参数传入。

你写的function Editor({ headerText })是JS对象解构的语法，等价于下面的写法：

// 不使用解构的完整写法
function Editor(props) {
  // 从props对象中取出headerText属性
  const headerText = props.headerText
  return (
    <div className="title">
      <span>{headerText}</span>
    </div>
  );
}

参数位置的花括号只是在定义函数时就完成了解构操作，和你在函数体内解构是完全一样的效果。如果你直接把参数写成function Editor(headerText)，那此时headerText拿到的是整个props对象，不是你想要的字符串，后续渲染或者操作的时候自然会报错。

和你举例的普通函数的区别 #

你看到的formatName是普通的JS函数，调用逻辑完全由你自己控制，你传什么参数函数就会接什么参数，没有框架层面的统一封装。
而React组件的调用是由React框架处理的，所有JSX上写的属性都会被统一打包到props对象里，这是React组件的固定规则，和你传的属性是什么类型无关。

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