这一小节,父子通信理解不了,请蜗牛老师解惑
来源：7-1 完善信息-boss信息完善页面
百兽凯多00
2018-02-21
avatar-selector.js
<List renderHeader={() => gridHeader}>
<Grid data={avatarList} columnNum={5} onClick={elm => {
this.setState(elm) // elm代表的是什么
this.props.selectAvatar(elm.text)
}}/>
</List>bossinfo.js
<AvatarSelector selectAvatar= {(imgname) => {
this.setState({
avatar: imgname
})
}}
></AvatarSelector>其中,ES6函数,这种写法又如何理解?
selectAvatar= {(imgname) => {
this.setState({
avatar: imgname
})
}}1回答
-
每个组件 在写的时候可以在外层赋予它属性(此例子就是给props 一个 selectAvatar 供调用)
例如 : <AvatarSelector selectAvatar={.........} ></AvatarSelector>
这行代表你在bossinfo.js使用了AvatarSelector这个组件, 并且传给组件一个方法 叫做selectAvatar
而这个方法在jsx 最外面{}是必须的不多说,
ES6单个参数可以省略()
selectAvatar其实就是个方法 imgname => { this.setState( {avatar: imgname } ) }
拿到名字字串后对BossInfo 这个组件 的state更新 avatar状态
—————————————————————————————
onClick={elm => {
this.setState(elm) // elm代表的是什么
this.props.selectAvatar(elm.text)
}
每当 avatar-selector.js 里面的onClick 执行的时候, 他会把你选中的
avatarList 里面的元素拿出来"当成方法传入的参数" 也就是 elm , 里面元素定义也就是当时规定 { icon: xxx.png, text: xxx}
elm传进去当成参数后自然就可以使用elm.text当成参数执行 this.props.selectAvatar(elm.text)
白话:给我一个elm物件 => 我会做两件事情
1.this.setState(elm)
我帮你把AvatarSelector组件使用react 里面的 setState更新avatar然后会自动渲染AvatarSelector的画面呦~)
2.this.props.selectAvatar(elm.text)
帮你执行父组件bossinfo.js 的selectAvatar的方法 , 让父组件的state知道当前选的avatar的名称,这样你才有资料可以上传
不知道这样好不好理解
有误会的话在请老师或大神同学更正
022018-08-25
Redux+React Router+Node.js全栈开发
1822 学习 · 750 问题
相似问题