采用适当的方式将函数作为prop传递参数

Question

If I try to pass a function with parameters as props from a Parent component to a Child component in this way:

handleClick={() => handleClick(tiposObjetivos.RENTA_TEMPORAL)}

The Child component will re-render everytime Parent is re-render as it creates the function in every render. What is the better way to pass a function as a prop with parameters?

Answer 1

there are two ways to pass function as props

  <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
    <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

The above two lines are equivalent, and use arrow functions and Function.prototype.bind respectively.