Question

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

例如

<MyButton onClick={this.myOnClick} />

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

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

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

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

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

Answer 1

您可以在onClick绑定中传递args：

<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>
    )
  }
}

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

1 个答案: