У компонента React разное поведение при наведении в разных контейнерах - PullRequest
Новая
       65

У компонента React разное поведение при наведении в разных контейнерах

0 голосов
/ 27 октября 2019

React family tree app - screenshot

Я пишу приложение React для отображения семейного древа и пытаюсь реализовать поведение "зависания" на компоненте самого низкого уровня. Иерархия компонентов настраивается следующим образом: 

TreeDisplay
    TreeDisplayCore
        FocusPersonDisplayTile
        PersonMini
        PersonMiniAdd
    ChildView
        ChildRow
            PersonMini
            PersonMiniAdd

Компонент PersonMini является рассматриваемым компонентом. Первые три поколения показаны в TreeDisplayCore, а последнее поколение - в ChildView. ChildView содержит один или несколько ChildRow компонентов, в зависимости от количества детей. И TreeDisplayCore, и ChildRow содержат PersonMini компоненты.

Я реализовал некоторые стили наведения для компонентов PersonMini, используя псевдоселектор CSS :hover. В конце концов я заметил, что, хотя стиль наведения вступил в силу, как только курсор мыши вошел в компонент PersonMini, когда он был внутри компонента TreeDisplayCore, он работал только для компонентов PersonMini внутри компонента ChildRow, когда вы зависалиповерх текста внутри компонента.

Hover and non-hover states

Я провел некоторое исследование и узнал, что существует другой «способ реагирования» на выполнение действий, который заключается в изменении состояния компонента с помощьюсвойства mouseEnter и mouseLeave. Я сделал это изменение, и, хотя мне понравился результат, и я подумал, что он выглядел более профессионально, у него все еще были те же проблемы с поведением при наведении. Компоненты PersonMini в контейнере TreeDisplayCore работали нормально, но компоненты внутри контейнера ChildRow вообще не реагировали на зависание.

Я озадачен тем, почему у меня два разных поведения. Код, который вызывает компоненты PersonMini, практически одинаков для обоих контейнеров и имеет следующий вид: 

<PersonMini
    person={ ~data~ }
    key={ ~data~ }
    resetViewFocus={ ~data~ }
    viewRole={ ~data~ }
/>

В любом случае функция onMouseEnter работает правильно при поведение наведения на самом деле начинается. Я не могу думать о какой-либо существенной разнице между этими двумя случаями, за исключением того, что существует дополнительный уровень вложенности для второго случая. Кто-нибудь знает, в чем проблема или что я делаю неправильно?

Я предпочитаю решить эту проблему, не добавляя библиотеки стилей React, если это возможно.

Спасибо.

...