带有花括号中的参数的功能性 React 组件答案

【问题标题】：Functional React Component with an argument in curly braces带有花括号中的参数的功能性 React 组件
【发布时间】：2017-05-18 13:42:06
【问题描述】：

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

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

他们为什么用花括号把物品包裹起来，这是一个道具

【问题讨论】：

标签： reactjs react-jsx

【解决方案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

【讨论】：

* 解构

【解决方案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>
);

干杯！ --奥马尔

【讨论】：