Question

好吧，所以我是React的新手，关于事件处理程序的一件事确实让我非常困扰：我似乎无法获得关于如何将参数传递给他们的直接答案。到目前为止，我已经看到了两种方法：

绑定：props.squareClick.bind（this，argument）

内联：onClick = {（）=> props.squareClick（argument）}

我不断阅读的重要内容是性能成本。因为内联函数或具有Bind的函数在重新渲染时被视为全新的函数，所以会产生额外的GC开销，并且对于类组件，它可能会破坏PureComponent来对shouldComponentRender进行浅层检查。

然后有人说这是过度优化，我不应该担心它，而只是使用内联函数。太酷了，但是老实说，所有这些矛盾的信息都让我感到困惑。

因此，我将包含一个代码示例。它取自我为练习React而制作的一个Tic-Tac-Toe应用程序。它是板上单个Square的功能组件。该组件可用于所有正方形，并且会将一个键作为道具传递（即TOP_LEFT）以指示它是哪个正方形。还有一个单击处理程序，当单击Square时，会将事件发送回父组件。为了使单击处理程序知道单击了哪个Square，该key属性将作为参数传递。

请查看此代码，并给我反馈。这是React可接受的做法吗？它会导致性能下降吗？这种性能下降会是实质性的吗？最后，如果您的回答是我不应该这样做，请向我明确说明一种更好的做法。

非常感谢您。

import React from 'react';

const Square = props => {
    return (
        <div onClick={() => props.squareClick(props.key)}>
            <p>{props.value}</p>
        </div>
    );
};

export default Square;

Answer 1

我通常使用datasets：

import React from 'react';

const Square = props => {
    return (
        <div
          data-key={props.key}
          onClick={props.squareClick}>
            <p>{props.value}</p>
        </div>
    );
};

export default Square;

然后在方法本身上，您只需取回e.target.dataset.key即可。

或者您也可以将其转换为类组件：

import React from 'react';

class Square extends React.Component {
    handleClick = e => {
      this.props.squareClick(this.props.key)
    }

    render() {
      return (
          <div onClick={this.handleClick}>
              <p>{this.props.value}</p>
          </div>
      );
    }
};

export default Square;

Answer 2

在带有Typescript的React中，我将额外的参数传递给事件处理程序：

import React from 'react';

export default class MyComponent extends React.Component {

    constructor(props: any) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    render() {
        return (
            <div>
                <p onClick={(this.handleClick("Volvo"))}>Volvo</p>
                <p onClick={this.handleClick("Saab")} >Saab</p>
                <p onClick={this.handleClick("Mercedes")} >Mercedes</p>
                <p onClick={this.handleClick("Audi")} >Audi</p>
                <div id="selectResult">
                </div>
            </div>
        );
    }

    handleClick(selected: string): ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) {
        return (e) => {
            e.preventDefault();
            document.getElementById("selectResult")!.innerHTML = "You clicked: " + selected;
        }
    }

}

另请参见该示例的项目 Codpen

Answer 3

对于您的示例，可以使用：

import React from 'react';

const Square = props => {
    const handleClick = () => props.squareClick(props.key);
    return (
        <div onClick={handleClick}>
            <p>{props.value}</p>
        </div>
    );
};

export default Square;

使用这种方法，仅对函数使用引用，就不会每次都重新创建函数本身。但是，在某些情况下，人们无法使用类似这样的方法来寻求其他解决方案。像这样在这里有多个问题：

How to pass variables to a function reference?

React-如何将参数传递给事件处理程序

3 个答案: