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是一个道具，并且将{items}作为参数传递会破坏props对象，因此该函数仅使用道具items，以简化代码。这样，您可以在功能组件中使用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} />

因此，在您的示例中，使用道具看起来像这样：

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

干杯！ -奥马尔

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

2 个答案: