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

Question

早上好，

我正在编写一个 React 应用程序，运行进入一个有趣的情况，我希望有人知道如何 Javascript、React（也许 HTML好吧）工作可以为我解释。

将以下两段代码视为 React 功能组件中 return 语句的一部分：

考虑：

<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>

请向我解释为什么第一段代码中的点击侦听器什么也没做，而第二段代码按预期工作。

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;

Seeking explanation regarding onclick listeners in nested jsx components