为什么在 React 中将 props 作为参数传递给组件时需要大括号？

Question

我不明白为什么 prop 参数需要用大括号括起来。谁能解释为什么？考虑以下三个组成部分。 Kid 正确渲染（它通过大括号中的道具）。但是 Kid2 没有（它不使用大括号）。为什么需要大括号？

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>
  );
}


import "./styles.css";
//curly brackets used in argument
export default function Kid({ person }) {
  return (
    <div className="SubComp">
      <h1>Name is: {person.nombre}</h1>
    </div>
  );
}


import "./styles.css";
//NO curly brackets used in argument
export default function Kid2(person) {
  return (
    <div className="SubComp">
      <h1>Name is: {person.nombre}</h1>
    </div>
  );
}

这里是一个codesandbox：

https://codesandbox.io/s/3-component-subcomponent-props-forked-k0iqdq?file=/src/App.js

Answer 1

您的组件将被传递一个包含各个道具的对象。您不需要使用大括号，但您确实需要将其视为对象。所以如果你愿意，你可以这样做：

export default function Kid(props) {
  const person = props.person;

作为速记，您可以使用 destructuring 进行分配：

export default function Kid(props) {
  const { person } = props;

作为更短的手，您可以将解构移动到参数列表中

export default function Kid({ person }) {

所以我们使用花括号是为了方便