Sintassi della funzione di freccia nei componenti statici di React

Question

Recentemente ho scoperto la gioia dei componenti senza stato. Per esempio, questo mi rende molto felice (e funziona):

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 
} 

sarei ancora più felice se ho potuto fare lo stesso lavoro componente E6 arrow function syntax, in questo modo:

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 
} 

ho seguito this video, ma non riesco a far funzionare la versione della sintassi delle frecce.

Qualcuno può segnalare cosa sto facendo di sbagliato, per favore?

Answer 1

Ti manca la dichiarazione export. Aggiungi questo al vostro modulo:

export {ClassroomsOverview as default} 

Vorrei però consiglia di utilizzare la sintassi con il export default dichiarazione di funzione.