React 构造函数绑定事件如何传参

Question

class albumList extends PureComponent {    constructor(props) {        super(props)        this.play = this.play.bind(this)    }    play(song) {        console.log(song)    }    render() {        return(            <div className="album-list">                {                    this.props.data.map((item,index)=>{                        return (                            <div className="album-list-item" key={index}>                                    <img onClick={this.play } alt="" src="./img/album-list-play.png" />                            </div>                        )                    })                }            </div>        );    }}上面的代码中，事件 play 在构造函数中使用bind的方式绑定，但是发现好像穿不了参数，在构造函数中绑定事件这样的方式是react中比较推荐的优化方案，而又想传参的话，该怎么写呢？react绑定事件的方式：在元素中直接bind绑定方法，但是每次render的时候都会触发到函数在元素中使用箭头函数，这样子可以传参，但是会发现这样子只不过是把相同的函数放到不同的内存里面

Answer 1

嗨，如果不希望用匿名函数的话，可以将 img 抽象一层组件，供参考：

class AlbumItem extends React.PureComponent {

  onClick = () => this.props.onClick && this.props.onClick(this.props.song)

  render () {

    const { song, onClick, ...restProps } = this.props

    return <img {...restProps} onClick={this.onClick} />

  }

}

Answer 2

你不知道bind函数可以有多个参数吗，另外在构造函数里传递参数似乎没有什么意义