当在 React 中处理（转储）子组件中的事件时，应该向从其（智能）父组件传递的回调提供什么以使其达到预期效果？它应该是我们感兴趣的事件还是结果的一部分？当我们有深度嵌套的组件时，它如何扩展？还有其他一些考虑吗？
直观上，我看到传递整个事件背后的好处，因为（i）在父级中处理事件时我们可以从事件中获取更多数据，并且（ii）它分离了关注点（转储组件仅呈现并且没有逻辑）。另一方面，它要求子级有一个构造函数bind包装方法。
我见过这两种方法都被使用过。例如，在在 React 中思考 https://facebook.github.io/react/docs/thinking-in-react.html作者在子组件中包装回调来传递值（请参阅 CodePen 上的代码 http://codepen.io/rohan10/pen/qRqmjd?editors=0010），而在大多数 SO 帖子中，事件被传递，并且其值通过以下方式在父组件中提取event.target.value.
代码示例
通行证事件：
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
this.setState({checked: event.target.checked});
}
render() {
return (
<Child checked={this.state.checked} handleClick={this.handleClick}/>
);
}
}
class Child extends React.Component {
render() {
return (
<p>
<input
type="checkbox"
checked={this.props.checked}
onChange={this.props.handleClick}
/>
{" "}
Click me
</p>
);
}
}
仅传递值（注意 handleClick2 ):
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(checked) {
this.setState({checked: checked});
}
render() {
return (
<Child checked={this.state.checked} handleClick={this.handleClick}/>
);
}
}
class Child extends React.Component {
constructor(props) {
super(props);
this.handleClick2 = this.handleClick2.bind(this);
}
handleClick2(event) {
this.props.handleClick(event.target.checked);
}
render() {
return (
<p>
<input
type="checkbox"
checked={this.props.checked}
onChange={this.handleClick2}
/>
{" "}
Click me
</p>
);
}
}
您应该在没有事件的情况下传递您需要的东西。除非您想从事件中提取相关数据，否则不需要整个对象：例如target或者当您对多个元素/操作使用相同的回调时。
你不会有任何性能问题，而且绝对没有react-ish 方式来做到这一点。只需使用您的判断即可。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
