Question

您可能知道我们可以创建箭头函数作为事件处理程序而不绑定 this （支持Babel Stage 2）。在React with Redux中，我们有Smart和Dumb Components。因此，我想在智能组件中使用 默认参数 （为了可重用性）创建状态修改事件处理程序，并将它们作为道具传递给Dumb Components，如下所述： - < / p>

// SmartComponent.js

class SmartComponent extends Component {

  state = {count: 0};

  handleClick = (inc = 1) => this.setState({count: this.state.count + inc});

  render = () => <DumbComponent handleClick={this.handleClick} />
}

// DumbComponent.js

function DumbComponent(props) {
 return <button onClick={props.handleClick}>Submit</button>;
}

问题是我得到一个控制台日志，说明传递的箭头函数是一个对象而不是一个函数。如果我们创建如下箭头函数，或者如果初始箭头函数在DumbComponent中没有 默认参数 ，它将按预期工作。

// DumbComponent.js

function DumbComponent(props) {
 return <button onClick={() => this.props.handleClick()}>Submit</button>;
}

如果没有第二个箭头功能，任何想法/建议都会非常受欢迎。

使用箭头函数和默认参数

0 个答案: