寻求有关嵌套jsx组件中onclick侦听器的解释

Question

早上好，

我正在写一个React应用程序，遇到了一个有趣的情况，我希望了解Javascript、React(也许还有HTML(如何工作的人能为我解释

考虑以下两段代码作为React功能组件中返回语句的一部分：

考虑：

<ul>
{props.theProp.map((foo) => {
<li>
<Foo /* props */ onClick={() => bar.fooHarder()} />
</li>
})}
</ul>

反对：

<ul>
{props.theProp.map((foo) => {
<li onClick={() => bar.fooHarder()} >
<Foo /* props */ />
</li>
})}
</ul>

请向我解释为什么第一段代码中的click监听器什么也没做，而第二段代码却如预期那样工作。

JavaScript(React？HTML？(的原因是什么？为什么它不适用于CSS伪类(在这种情况下，我将光标设置为指针，效果很好(？

Answer 1

在第一段代码中，由于li是一个HTML元素，因此事件侦听器自动绑定到li元素。

在第二段代码中，Foo是React组件，这意味着onClick作为prop传递给Foo组件，但尚未绑定。

如果希望事件绑定到Foo组件，则必须使用其onClick属性。

类似于：

import React from 'react';
function Foo ({ onClick }) {
return <button onClick={onClick}>Click me!</button>;
}
export default Foo;