React组件接收props参数时为何需要使用花括号？

我搞不懂为什么组件接收props参数时需要用花括号包裹，请看下面的组件示例：Kid组件在参数中使用了花括号，能正常渲染；而Kid2未使用花括号，无法正常渲染。为什么必须使用花括号？

代码示例 #

// App.js
import "./styles.css";
import Kid from "./Kid";
import Kid2 from "./Kid2";

const person = { nombre: "Joe" };
export default function App() {
  return (
    <div className="App">
      <h1>In App Component</h1>
      <Kid person={person}></Kid>
      <Kid2 person={person}></Kid2>
    </div>
  );
}

// Kid.js
import "./styles.css";
// 参数中使用了花括号
export default function Kid({ person }) {
  return (
    <div className="SubComp">
      <h1>Name is: {person.nombre}</h1>
    </div>
  );
}

// Kid2.js
import "./styles.css";
// 参数中未使用花括号
export default function Kid2(person) {
  return (
    <div className="SubComp">
      <h1>Name is: {person.nombre}</h1>
    </div>
  );
}

原因解释 #

React组件的第一个参数是一个包含所有传入props的对象——不管你给组件传了多少个props，都会被统一打包进这个对象里。

• Kid组件里的({ person })是ES6的对象解构语法，作用是直接从props对象中提取person属性，等价于：

  export default function Kid(props) {
    const person = props.person;
    return (
      <div className="SubComp">
        <h1>Name is: {person.nombre}</h1>
      </div>
    );
  }
  

• 而Kid2组件里的person其实是整个props对象，你传入的person属性是这个对象的一个子属性，所以如果不用解构，正确写法应该是props.person.nombre，也就是：

  export default function Kid2(props) {
    return (
      <div className="SubComp">
        <h1>Name is: {props.person.nombre}</h1>
      </div>
    );
  }
  

简单来说：花括号不是React的强制要求，它是ES6的解构语法，用来简化从props对象中提取属性的操作，避免每次都写props.xxx。如果不用解构，你就必须直接使用整个props对象，通过点语法访问内部属性。

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