主页 / 问题 / 1068969
Accepted
Nikita
Asked:2020-01-12 22:43:07 +0000 UTC2020-01-12 22:43:07 +0000 UTC

如何替换 React 中的箭头函数？[关闭]

  • 772

在 React 社区中，很多人认为使用箭头函数是一个坏主意，因为它们每次都会重新渲染，但是如果箭头函数接受带有 onChange 的事件，如何摆脱它们呢？或者，假设我为每个有条件的产品创建一个循环 onClick 添加到购物车，并且 onClick 应该调用该函数，并传递 id

javascript

1 个回答

  1. Best Answer

    在您引用的文章中https://ru.reactjs.org/docs/faq-functions.html#arrow-function-in-render 接下来是您的问题的解决方案： https ://ru.reactjs.org/docs/ faq-functions.html#example-passing-params-using-data-attributes

    作为一种替代方法，您可以使用 DOM API 来存储事件处理程序所需的数据。如果您需要优化大量元素，或者使用依赖 React.PureComponent 的渲染树进行相等性测试，请考虑这种方法。

    const A = 65 // ASCII-код символа

class Alphabet extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      justClicked: null,
      letters: Array.from({length: 26}, (_, i) => String.fromCharCode(A + i))
    };
  }

  handleClick(e) {
    this.setState({
      justClicked: e.target.dataset.letter
    });
  }

  render() {
    return (
      <div>
        Just clicked: {this.state.justClicked}
        <ul>
          {this.state.letters.map(letter =>
            <li key={letter} data-letter={letter} onClick={this.handleClick}> // <--
              {letter}
            </li>
          )}
        </ul>
      </div>
    )
  }
}
    • 1

相关问题