React/ ESLint - JSX props 不应使用箭头函数

我目前正在 React 中创建一个组件，并且正在使用 ES Lint 规则react/jsx-no-bind。我的问题是我希望能够将参数传递给我的组件函数。这是我想用来执行此操作的代码：

class LanguageDropdown extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  changeLanguage = (lang) => {
    console.log(lang)
  };

  render() {
    return (
      <div>
        {this.props.languages.map(lang => <button onCLick={() => this.changeLanguage(lang)}>{lang}</button>)}
      </div>
    )
  }

...

这会引发 ESlint 错误：

JSX props 不应该使用箭头函数

我不完全确定如何在不使用箭头函数或使用.bind()。我可以向按钮元素添加数据属性，然后将事件传递到changeLanguage函数并使用 event.target() 获取属性，但这感觉不像是 React 中应该采用的方式。

有人可以告诉我正确的方法是什么吗？

您可以将按钮重构为自己的组件：

class MyButton extends Component {
  static propTypes = {
    language: PropTypes.string.isRequired,
  };

  onClick = () => console.log(this.props.language);

  render() {
    const {language} = this.props;
    return (
      <button onClick={this.onClick} type="submit">
        {language}
      </button>);
  }
}

然后在您的 Language DropDown 类中，使用 Button，如下所示：

class LanguageDropdown extends Component {
  ...

  render() {
    return (
      <div>
        {this.props.languages.map(lang => <MyButton key={lang} language={lang}/>)}
      </div>
    )
  }

  ...
}

还有一些额外的事情：

• 你有一个拼写错误 onCLick 应该是 onClick
• 您需要一把钥匙来存放重复的物品