Question

如果我有一个由javascript生成的div数组，它们都应该传入自己的onClick函数，我可以轻松地使用箭头函数使它们按照我想要的方式运行。但是，如果打开所有标志，ESLint会强调这是一种不好的做法，没有箭头功能或绑定甚至常规功能。所以这是我一直在做的解决方法，我想知道这是好的做法，还是我只是在没有得到任何好处的情况下愚弄我的内衣？

所以，如果我这样做：

const array = [0, 1, 2, 3]

array.map((d, index) => {
  return <div onClick = {
    () => myGeneralMethodOrFunction(index)
  }
  />
})

它可能看起来很整洁，但触发了我的短信，所以我这样做：

const array = [0, 1, 2, 3]

array.map((d, index) => {
  function onThisClick() {
    myGeneralMethodOrFunction(index)
  }
  return <div onClick = {onThisClick}/>
})

我只是不确定命名函数是否对实际发生问题有任何不同，我的linter试图让我的地址消失（这就是箭头功能，这样会造成不必要的重新渲染）

当你考虑将onThisClick（）直接写入divs onClick = {}时，这似乎特别可疑，即使我不知道这与我正在做什么有什么不同。

这是我所说的错误：https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

思想？

Answer 1

原因可能是，每次执行渲染时都会创建匿名函数，而命名函数则不会。虽然这不是什么大不了的事，但它在React社区中被认为是整洁和良好的做法。

查看这篇精彩文章，了解有关https://medium.com/@rjun07a/binding-callbacks-in-react-components-9133c0b396c6

主题的更多信息

您可以尝试以下代码。

const array = [0, 1, 2, 3]

class Example extends React.Component {

  // Method currying with extra bound variable from callbacks
  onThisClick = (index) => (event) => {
    // Your execution on index which you send in render method
  }

  render() {
    return(
      array.map((d, index) => (
         <div 
          key={index}
          onClick={this.onThisClick(index)}
         />
        )
      )
    )
  }
}

被命名函数是jsx道具的良好实践吗？

1 个答案: