Question

我最近被告知在渲染函数中使用bind（this）并不好，因为它每次都会创建全新的函数。因此，我正在使用箭头函数，如下所示，在两个<button>元素中。

我的问题是关于地图功能。它也使用.bind（this）。有没有办法将其转换为ES6 / 7格式？

return (
    <div>
        <button onClick={()=>this.changeDisplayType("images")}>Images</button>
        <button onClick={()=>this.changeDisplayType("audio")}>Audio</button>
        {
            resources.map(function(resource) {
                return (
                    <div key={resource.id}>
                        <div style={{fontWeight: "bold"}}>{resource.name}</div>
                        <div>({resource.info})</div>
                    </div>
                )
            }.bind(this))
        }


    </div>
)

我也刚刚意识到我可以完全删除.bind（this），我的代码仍然有效。因此，我也想知道它是否有所不同。

Answer 1

有没有办法将其转换为ES6 / 7格式？

是的，你可以使用arrow function：

这样写

resources.map(resource => {
    return (
        <div key={resource.id}>
            <div style={{fontWeight: "bold"}}>{resource.name}</div>
            <div>({resource.info})</div>
        </div>
    )
})

我可以完全删除.bind（this），我的代码仍然有效吗？

因为你没有在map主体中使用this关键字，意味着如果你试图访问任何类属性或方法而不绑定回调方法，它将抛出错误。

试试这个：删除绑定并尝试访问map body中的状态值，它会抛出错误。

将代码从使用.bind（this）转换为箭头函数

1 个答案: