[英]Why function inside function ReactJS?
ReactJS文档中有这段代码:
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
例如为什么为什么不能做这样的事情:
function handleClick(){
console.log("The component was clicked");
}
function Component(props){
return <a href="#">Click me</a>
}
ReactDOM.render(<Component onClick={handleClick}/>, document.getElementById('root'));
有人可以帮助我理解为什么必须有两个功能,或者将我的方向告诉初学者吗?
第二个版本不起作用,因为onClick on Component将被解释为prop,而不是事件处理程序。 您可以这样解决:
function handleClick(){
console.log("The component was clicked");
}
function Component(props){
return <a href="#" onClick={handlerClick}>Click me</a>
}
ReactDOM.render(<Component />, document.getElementById('root'));
现在,为什么不使用两个函数而不是一个内部带有处理程序的主函数? 可以,但是此版本缺少代码封装。 第一个版本中的ActionLink
是一个具体的单元,体现了所需的一切,而在第二个片段中,没有附加的handleClick
函数, Component
基本上是无用的。
ActionLink
是组件/类类型。 它允许对该链接所需的所有行为进行封装和代码重用。 如果它是一个自由功能,则将失去该OO设计承租人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.