为何React函数式组件的参数需要用大括号包裹？

兄弟我太懂那种花了离谱时间排查组件诡异行为、差点挠破头的感觉了！先帮你把问题拆解清楚——你遇到的someBoolean渲染异常，本质就是没搞明白React函数式组件接收props的语法规则，这才踩了坑。

核心原因：组件参数本质是一个props对象 #

React函数式组件默认只会接收一个参数：一个包含所有传入属性的props对象。举个最基础的写法：

function AnotherComponent(props) {
  // props是个对象，里面包含你传入的所有属性，比如someBoolean
  console.log(props.someBoolean); // 这里才能拿到真正的布尔值
  return <div>{props.someBoolean ? '已开启' : '已关闭'}</div>;
}

如果你直接写function AnotherComponent(someBoolean)，那这里的someBoolean根本不是你传入的那个布尔值，而是整个props对象！这就解释了为什么你设为true后渲染结果诡异——你其实在拿一个{ someBoolean: true }的对象做条件判断，而不是那个布尔值本身。

大括号是ES6对象解构的简写 #

我们平时写的function AnotherComponent({ someBoolean })，是ES6对象解构语法的简化写法，相当于直接从props对象里把someBoolean属性“拆”出来用，省去了每次写props.someBoolean的麻烦。对比两种写法：

// 完整解构写法
function MyComponent(props) {
  const { someBoolean } = props;
  // 直接用someBoolean变量
}

// 简写（就是你疑惑的大括号写法）
function MyComponent({ someBoolean }) {
  // 直接用someBoolean变量
}

你之前的问题大概率就是没加这个大括号，导致把整个props对象当成了someBoolean变量，自然条件判断完全不符合预期。

再复盘你遇到的诡异场景 #

假设你之前的组件是这么写的：

// 错误写法！
function AnotherComponent(someBoolean) {
  // 这里的someBoolean是props对象，不是传入的布尔值
  return <div>{someBoolean ? 'True' : 'False'}</div>;
}

// 调用组件
<AnotherComponent someBoolean={true} />

这时候someBoolean是一个{ someBoolean: true }的对象，而JavaScript里对象在条件判断中会被视为true——哪怕你传someBoolean={false}，这个对象依然是“真值”，所以永远会渲染True，这就是你觉得诡异的根源！

一句话总结 #

React函数式组件的参数是单个props对象，大括号是用ES6解构语法直接提取对象里的目标属性，只有这样才能正确访问到你传入的具体参数，而不是整个props对象。

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