带有大括号中参数的功能性 React 组件

Question

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

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

为什么他们用花括号把项目包起来，它是道具吗

Answer 1

这叫做"destructuring"。实际上，您将对象作为参数传递给函数，但解构仅使用对象的命名属性。

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 组件

Functional React Component with an argument in curly braces

reactjs

react-jsx