Поиск объяснения относительно слушателей onclick во вложенных компонентах jsx

Question

Доброе утро,

Я пишу приложение React и столкнулся с интересной ситуацией, в которой я надеялся, что кто-то знает, как работают Javascript, React (и, возможно, HTML). мог бы объяснить за меня.

Рассмотрим следующие два фрагмента кода как часть оператора return в функциональном компоненте 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>

Пожалуйста, объясните мне, почему прослушиватель кликов в первом фрагменте кода ничего не сделал, в то время как второй работал, как ожидалось.

О чем JavaScript (React? HTML?), Что вызывает это? Почему это также не относится к псевдоклассам CSS (в этом случае у меня есть курсор для установки на указатель, который отлично работает)?

Answer 1

В первом фрагменте кода, поскольку li является элементом HTML, прослушиватель событий автоматически привязан к элементу li.

Во втором фрагменте кода, Foo - это React Component , что означает, что onClick передается как prop компоненту Foo и еще не привязан.

Если хотите событие, которое будет привязано к компоненту Foo, вы должны использовать его onClick prop.

Что-то вроде:

import React from 'react';

function Foo ({ onClick }) {
  return <button onClick={onClick}>Click me!</button>;
}

export default Foo;