Question

这两个代码段之间有什么区别？

const Article = ({article}) => {
    return ( 
        <article key={article.id}>
            <a href={article.link}>{article.title}</a>
            <p>{article.description}</p>
        </article>
    );
};

和这一个：

const Article = (article) => {
    return ( 
        <article key={article.id}>
            <a href={article.link}>{article.title}</a>
            <p>{article.description}</p>
        </article>
    );
};

唯一的区别是箭头函数参数列表中的花括号...但它有不同的行为......在第一个示例中article可作为普通对象访问...但在第二个示例中，文章可以访问某种吸气剂或类似的......

Answer 1

这是使用es6的解构语法。

基本上Article期待一个对象。然后将其解构为新的属性。

你的第一个项目：

const Article = ({article}) => {
  return ( 
    <article key={article.id}>
      <a href={article.link}>{article.title}</a>
      <p>{article.description}</p>
    </article>
 );
};

相当于：

const Article = (props) => {
  const article = props.article;
  return ( 
    <article key={article.id}>
      <a href={article.link}>{article.title}</a>
      <p>{article.description}</p>
    </article>
 );
};

mozilla开发者网络有关于数组/对象解构形式的精彩文章：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Answer 2

这是用于解构数组和对象的ES6功能。

http://es6-features.org/#ParameterContextMatching

奇怪的箭头功能参数行为

2 个答案: