Składnia funkcji strzałek w React stateless components

Question

Ostatnio odkryłem radość z bezpaństwowych komponentów. Na przykład, to czyni mnie bardzo szczęśliwy (i działa):

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 
} 

Byłbym jeszcze szczęśliwszy, gdybym mógł zrobić taką samą pracę podzespołów z E6 arrow function syntax, tak:

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 
} 

mam następnie this video, ale nie mogę uzyskać wersji składni strzałek do pracy.

Czy ktoś może wskazać, co robię źle?

Answer 1

Brakuje deklaracji export. Dodaj do tego modułu:

export {ClassroomsOverview as default} 

Chciałbym jednak zalecamy stosowanie składni export default z deklaracji funkcji.