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

Question

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
                })
            }}

Answer 1

MachiAngel 2018-02-23 02:44:29

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

不知道这样好不好理解 

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

 

• 提问者 百兽凯多00 #1

  解答的非常细致,易懂,费心了,非常感谢！

• 慕函数7093388 #2

  话说好像组件里并没有avator这个state额，this.setState({
                      avatar: imgname
                  })设置的是谁的state呢