Как при наведение на дочерний компонент изменить css у родительского компонента React

Question

Есть несколько вложенных функциональных компонентов друг в друга.

<Component 1>
  <Component 2>
    <Component 3>
      <Component 4 />
    </Component 3>
  </Component 2>
</Component 1>

У компонента 1 есть подсветка при наведение (hover). Как сделать так, чтобы при наведение на вложенный компонент 4 снималось выделение у всего компонента 1 ?

Answer 1

Всем привет! Решил задачу следующим образом: через передачу коллбэка от родителя к дочернему элементу.

у Родителя, где будем менять делаем примерно следующее:

const [background, setBackground] = useState(" ");

Далее, используем возможность встроенных стилей в реакте:

style={{backgroundColor: background}}

И в дочерний передаем пропом:

changeBackground={background => setBackground(background)}

Во все промежуточные компоненты указываем:

changeBackground={changeBackground}

В нижний дочерний:

const [isHovered, setIsHovered] = useState(false);

onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
style={{backgroundColor:`${isHovered ? changeBackground('white') : changeBackground(COLOR.STEEL_TRANSPARENT)}`}}

БЛОГ НА HUSL

Как при наведение на дочерний компонент изменить css у родительского компонента React

Ответы (1 шт):