Javascript 如何解决功能组件上的jsx无绑定错误？

我有一个小组件来改变我的网站语言。由于eslint配置了

jsx no bind

，因此会在下面的代码中引发错误

const ChangeLanguage = ({ toggleLanguage }) => {

    const toggle = () => {
        console.log('hi')
        toggleLanguage()
    }

    return (
        <IconButton
            onClick={toggle}
        >
            <Language /> // this is an svg-icon
        </IconButton>
    )
}

export default connect(null, { toggleLanguage })(ChangeLanguage)

constchangelanguage=（{toggleLanguage}）=>{
常量切换=（）=>{
console.log（'hi'）
切换语言（）
}
返回(
//这是一个svg图标
)
}
导出默认连接（null，{toggleLanguage}）（ChangeLanguage）

我在谷歌上搜索了

jsx的no-bind

用法。有人说我们应该启用它，因为在每次渲染中javascript都会生成新函数，并且会导致不必要的渲染（如airbnb代码约定）。但也有一些人说，它的性能改进可以忽略不计，并且会降低代码的可读性（就像这样）。这里有两个问题：

如何解决错误（即不禁用

jsx无绑定

）

您对

jsx no bind

配置有何建议（即我是否应该将其从eslint配置中完全/部分删除？）

---

PS:有更多关于在web中将箭头函数或绑定方法作为道具传递的文档。但我在问题陈述中只提到了其中两个。之所以出现这种情况，是因为您在组件的return语句中传递了一个函数，并且每次组件重新呈现时都会创建一个新函数

为了避免这种情况，您只能使用它的引用。像这样,

const ChangeLanguage = ({ toggleLanguage }) => {
return (
    <IconButton
        onClick={toggleLanguage} // <----->
        <Language /> // this is an svg-icon
    </IconButton>
 )
}

constchangelanguage=（{toggleLanguage}）=>{
返回(
如果我们这样做，eslint不会抱怨：

const ChangeLanguage = ({ toggleLanguage }) => {

    function toggle () {
        console.log('hi')
        toggleLanguage()
    }

    return (
        <IconButton
            onClick={toggle}
        >
            <Language /> // this is an svg-icon
        </IconButton>
    )
}

export default connect(null, { toggleLanguage })(ChangeLanguage)

constchangelanguage=（{toggleLanguage}）=>{
函数切换（）{
console.log（'hi'）
切换语言（）
}
返回(
//这是一个svg图标
)
}
导出默认连接（null，{toggleLanguage}）（ChangeLanguage）

但我不确定区别是什么。在这种情况下，是不是不再在每个渲染上创建函数，还是规则不识别它？
你是对的。这里的问题解决了，但如果我们必须将函数作为道具传递（在其他情况下）…如何将函数作为onClick道具传递而不出错（即不必要的渲染副作用）嗯，我个人并没有遇到你“必须”的情况在return语句中创建一个函数，您可以在return或render方法外部定义该函数，并在内部传递它的引用。或者，如果希望渺茫，您只需通过编写注释来禁用此文件的eslint规则，如：same line://eslint disable line jsx no bind next line://eslint disable next line jsx-no-bind下面的所有代码：/*eslint disable jsx no bind*/I在不改变原始问题的情况下稍微更改代码。假设我们还必须/想要做其他事情（例如将字符串打印到控制台）..问题仍然存在！我相信，因为它仍然在渲染内部，因为它是一个函数组件，如果您将它切换到基于类的组件，您可以在渲染方法之外定义函数，并且它会工作。我不确定
useCallback（）
hook是否绕过此规则，建议您尝试/查找它。感谢您关于
useCallback
hook的建议，我将查看它。但对于第一部分，（因为更好地定义函数组件而不是基于类）现在Q最好定义一个遵守
jsx no bind
规则的类，或者一个不遵守规则的功能组件？！