将带参数的方法传递给组件，避免不必要的渲染

Question

为了避免重新渲染，我们应该将绑定的方法传递给示例按钮组件而不调用

例如。

<MyButton onClick={this.myOnClick} />

我想创建通用组件，它作为下一个道具将参数传递给 myOnClick 方法，但我希望能够传递未知数量的元素。

其中一个解决方案是传入另一个 args 的 props 数组，但是当我在 render 方法中创建新数组时，会在 MyButton 组件中调用 update。

<MyButton onClick={this.myOnClick} onClickArgs={[‚first’, {s: ’second’}, ’third']} />

当然，我可以在构造函数中创建数组，但我在数据数组的 .map() 中渲染了 MyButtons，我必须将数据从数组传递到 args。

最有趣的解决方案是将 args 数组解析为 JSON ????

Answer 1

您可以在 onClick 绑定中传递参数：

<MyButton onClick={ this.myOnClick.bind(this, 'first', { s: second }, 'third') } />

然后在你的myOnClick 函数中：

myOnClick(args) {
    // Do something with args...
}

编辑：

尝试在类中使用粗箭头函数：

class Todo extends React.Component {
  onToggleComplete = () => {
    dispatch( {
      type: 'TODO_TOGGLE_COMPLETE',
      id: this.props.todo.id
    } )
  }
  render() {
    const todo = this.props.todo
    return (
      <li key={todo.id}
          onClick={this.onToggleComplete}>
        {todo.complete ? '✓' : '–'} {todo.text}
      </li>
    )
  }
}