带大括号参数的函数式 React 组件 [英] Functional React Component with an argument in curly braces

问题描述

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

I recently came across this piece of code on a website

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

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

Why have they wrapped the items in curly braces and is it a prop

推荐答案

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

This is called a "destructuring". Actually, you're passing an object as an argument to the function, but the destructuring uses only the named properties of the object.

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

destructuring(properties); // 2

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

You can even use it for creating variables.

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

const { name, age } = properties;

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

这篇关于带大括号参数的函数式 React 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！