Чтобы зарегистрировать только один щелчок по вложенному компоненту, а не по родительскому компоненту в React.js, вы можете рассмотреть несколько методов:

Метод 1: Event.stopPropagation()
Вы можете использовать метод event.stopPropagation(), чтобы предотвратить передачу события клика родительскому компоненту. Вызвав этот метод в обработчике событий щелчка вложенного компонента, вы можете гарантировать, что будет вызвано только событие щелчка вложенного компонента.

Пример:

function NestedComponent() {
  const handleClick = (event) => {
    event.stopPropagation();
    // Handle click event for the nested component
  };
  return <div onClick={handleClick}>Nested Component</div>;
}

Метод 2. Условный рендеринг.
Другой подход заключается в условном рендеринге вложенного компонента на основе переменной состояния. Управляя отрисовкой вложенного компонента, вы можете гарантировать, что событие щелчка будет зарегистрировано только при отрисовке вложенного компонента.

Пример:

function ParentComponent() {
  const [showNestedComponent, setShowNestedComponent] = useState(false);
  const handleParentClick = () => {
    // Handle click event for the parent component
  };
  const handleNestedClick = () => {
    // Handle click event for the nested component
  };
  return (
    <div onClick={handleParentClick}>
      Parent Component
      {showNestedComponent && (
        <div onClick={handleNestedClick}>Nested Component</div>
      )}
    </div>
  );
}

Метод 3: ссылки React
Вы также можете использовать ссылки React, чтобы проверить, произошло ли событие щелчка из вложенного компонента или из родительского компонента. Сравнивая цель события со ссылкой на вложенный компонент, вы можете определить, какой компонент вызвал событие щелчка, и обработать его соответствующим образом.

Пример:

function ParentComponent() {
  const nestedComponentRef = useRef();
  const handleClick = (event) => {
    if (event.target === nestedComponentRef.current) {
      // Handle click event for the nested component
    } else {
      // Handle click event for the parent component
    }
  };
  return (
    <div onClick={handleClick}>
      Parent Component
      <div ref={nestedComponentRef}>Nested Component</div>
    </div>
  );
}