功能性React Component,带花括号的参数

Question

我最近在网站上遇到了这段代码

const List = ({ items }) => (
  <ul className="list">
    {items.map(item => <ListItem item={item} />)}
  </ul>
);

为什么他们用花括号包裹物品,它是道具

Answer 1

这被称为"解构".实际上,您将对象作为参数传递给函数,但是解构仅使用对象的命名属性.

const destructuring = ({ used }) => console.log(used);
    
const properties = {
  unused: 1,
  used: 2,
};

destructuring(properties); // 2

您甚至可以使用它来创建变量.

const properties = {
  name: 'John Doe',
  age: 21,
};

const { name, age } = properties;

console.log(name, age); // John Doe 21

Answer 2

我是 React 的新手，但我认为是的，它items是一个 prop，{items}作为参数传递会解构props对象，因此该函数仅使用 propitems来简化代码。这样您就可以items在功能组件中使用，而不是props.items. 例如，我在下面的代码中测试了类似的情况。使用解构看起来像这样：

const ListItem = ({content}) => (
  <li>{content}</li>
);
...
<ListItem key={index} content={content} />

而如果你使用props它，它看起来像这样：

const ListItem = (props) => (
  <li>{props.content}</li>
);
...
<ListItem key={index} content={content} />

因此，对于您的示例，使用 props 将如下所示：

const List = (props) => (
  <ul className="list">
    {props.items.map(item => <ListItem item={item} />)}
  </ul>
);

同时，解构允许您简化为items，而不是props.items原始代码中正在执行的操作：

const List = ({ items }) => (
  <ul className="list">
    {items.map(item => <ListItem item={item} />)}
  </ul>
);

干杯! ——奥马尔