javascript - 为什么要在 ReactJS 函数中使用函数？

Question

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'));

有人可以帮助我理解为什么必须有两个函数，或者为我指明向初学者解释这一点的方向吗？

Answer 1

第二个版本将不起作用，因为组件上的 onClick 将被解释为 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'));

现在，为什么不使用两个函数而不是一个带有处理程序的 main 函数呢？可以，但是这个版本缺乏代码封装。第一个版本中的 ActionLink 是一个具体单元，体现了它所需的一切，而在第二个代码段中，如果没有额外的 handleClick 函数，Component 基本上是无用的。