这一小节,父子通信理解不了,请蜗牛老师解惑

来源: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回答

MachiAngel

2018-02-23

每个组件 在写的时候可以在外层赋予它属性(此例子就是给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的名称,这样你才有资料可以上传




不知道这样好不好理解 

有误会的话在请老师或大神同学更正






 


0
2
慕函数7093388
话说好像组件里并没有avator这个state额,this.setState({ avatar: imgname })设置的是谁的state呢
2018-08-25
共2条回复

Redux+React Router+Node.js全栈开发

全网唯一的React 16+Redux+React Router4实战课程,学到手是你的真本领!

1822 学习 · 750 问题

查看课程