Arrow Funktionssyntax in Stateless Komponenten reagieren

Question

Ich habe vor kurzem die Freude der staatenlosen Komponenten entdeckt. Zum Beispiel macht dies sehr glücklich, mich (und es funktioniert):

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 
} 

ich wäre noch glücklicher, wenn ich die gleiche Komponente der Arbeit mit E6 arrow function syntax machen könnte, etwa so:

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 
} 

Ich habe gefolgt this video, aber ich kann nicht die Pfeil-Syntax-Version zu arbeiten.

Kann jemand bitte darauf hinweisen, was ich falsch mache?

Answer 1

Sie vermissen die export Deklaration. Fügen Sie diese auf Ihrem Modul:

export {ClassroomsOverview as default} 

ich aber die export default Syntax mit der Funktionsdeklaration verwenden würde empfehlen.