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

我最近发现了无状态组件的乐趣。例如，这使我感到非常高兴(并且有效):

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 arrow function syntax使相同的组件工作，我会更加高兴，像这样:

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
}

我遵循了this video，但是我无法使用箭头语法版本。

有人可以指出我做错了吗？

最佳答案

您缺少export声明。将此添加到您的模块:

export {ClassroomsOverview as default}

但是，我建议将export default语法与函数声明一起使用。