React 无状态组件中的箭头函数语法

Question

我最近发现了无状态组件的乐趣。例如，这让我感到非常高兴（而且它也有效）：

import { Component, PropTypes } from 'react';

export default function ClassroomsOverview(props, context) {
  return (
    <div>
      <p>{context.classrooms.data.length} Classrooms.</p>
      <p>{context.classrooms.members.length} Students</p>
    </div>
  );
}

ClassroomsOverview.contextTypes = {
  classrooms: PropTypes.object
}

如果我能让同一个组件使用E6箭头函数语法，我会更加高兴：

import { Component, PropTypes } from 'react';

const ClassroomsOverview = (props, context) => (
    <div>
      <p>{context.classrooms.data.length} Classrooms.</p>
      <p>{context.classrooms.members.length} Students</p>
    </div>
  );

ClassroomsOverview.contextTypes = {
  classrooms: PropTypes.object
}

我已经按照这个视频所示进行操作，但箭头语法版本无法运行。

请问有人可以指出我的错误吗？

- U r s u s

---

在第二个例子（期望的）中，您没有导出const函数。 - Nikos Paraskevopoulos

export default 是一个 操作符，它以表达式作为参数（参考）；因此你可以使用 export default (props, context) => ....;。否则，你可以使用 export const ClassroomsOverview = (props, context) => ....;，但这是一个 命名 导出，而不是默认导出。我同意 Bergi 的观点，使用 export default function 语法。 - Nikos Paraskevopoulos

使用解构更酷！const ClassroomsOverview = ({classrooms}) => { //doStuff() } - lux

我想知道为什么你会更喜欢使用ES6箭头函数语法？它不能是因为打字，因为它使用了1个以上的字符（具体来说是const => 与function）。它也不可能是this语义，因为这是一个无状态组件。难道只是为了避免使用关键字，以便不分散组件名称的注意力吗？或者只是为了在任何地方都使用新的闪亮工具？ - David Mason

@DavidMason：你抓住我了 :-)，我只是想在任何可能的地方使用箭头函数。但现在意识到，它并不适用于所有情况（例如React类中的构造函数和功能组件）。 - Christof Kälin

Answer 1

你缺少了export声明。请在你的模块中添加这个声明：

export {ClassroomsOverview as default}

然而，我建议在函数声明中使用export default语法。

- Bergi

---

谢谢，我以为我错过了什么显而易见的东西。但是，如果我在const之前添加export default，我会得到一个编译器错误。也许我误解了你的建议。请你能详细点吗？ - U r s u s

export default const X = …; 是语法错误。它不被支持。你可以只使用值来做 export default …;，但不能用 const 声明。请参见 此答案。 - Bergi

我的建议是对于你的第一个已经工作的代码片段，不要使用箭头函数。 - Bergi

我明白了，谢谢。出于好奇，你能解释一下使用 export {ClassroomsOverview as default} 有什么问题吗？ - U r s u s

这并没有错，但有点奇怪。export default 更加简洁和声明性，你不用重复变量名。至少在我看来如此。你可以选择自己的风格。 - Bergi