Question

我有一个像这样构建的React组件，它从其Parent组件中获取一个回调函数。当onClick触发时，它会使用来自映射的项的值调用回调：

class Child extends Component {
  static propTypes = {
    ...
  }

  render = () => {
    return (
      <div>
        {this.props.data.map((el, idx) => {
          return <section onClick={() = this.props.cb(el.val)}></section>
        }
        )}
      </div>
    );
  }

}

我想知道的是我如何在不使用此语法map或将值绑定到回调的情况下将() => this.props.cb(item.val)中的值传递给回调。我不能将回调传递给onClick，因为它会立即触发值。

当前语法有效，但会破坏我在linter中设置的规则。

Answer 1

render中绑定的替代方法是打破一个新的组件，该组件接受回调并传递值：

class Section extends React.Component {
  handleClick = () => {
    this.props.onClick(this.props.val)
  }
  render() {
    return <section onClick={this.handleClick}></section>
  }
}

（我建议只是禁用那个lint规则）

将值传递到从父组件到子组件的回调而不进行绑定

1 个答案: