[英]Arrow function syntax in React stateless components
I've recently discovered the joy of stateless components. 我最近发现了无状态组件的乐趣。 For instance, this makes me quite happy (and it works): 例如,这让我很开心(而且它有效):
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
}
I would be even happier if I could make the same component work with E6 arrow function syntax , like so: 如果我可以使用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
}
I've followed this video , but I can't get the arrow syntax version to work. 我已经关注了这个视频 ,但我无法使用箭头语法版本。
Can anybody point out what I'm doing wrong please? 任何人都可以指出我做错了吗?
You're missing the export
declaration. 你错过了export
申报单。 Add this to your module: 将其添加到您的模块:
export {ClassroomsOverview as default}
I would however recommend using the export default
syntax with the function declaration. 但是我建议在函数声明中使用export default
语法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.