Как вызвать handle и поменять состояние родителького компонента из дочерних?

Рейтинг: 0Ответов: 0Опубликовано: 09.05.2023

У меня есть страница (компонент) Home, находится в файле Home.js. В этом файле объявляю состояние scroll, вот так:

let [scroll, setScroll] = useState({ offset: 0, currentsectionIndex: 0 });
setScroll = ({ ...newScroll }) => {
        scroll.offset = newScroll.offset
        scroll.currentsectionIndex = newScroll.index

}

В файле Home.js также есть несколько handle функций:

    const handleScroll = () => {...}
    const handleClick = (e) => {...}

Три точки - пропущенный код. В return блоке есть компоненты поменьше:

return (
    
let sectionClasses = dataItem.isReverced ? "section section__reverced" : "section";
                    return <DatabaseSection titles={dataItem.titles} subtitles={dataItem.subtitles} key={dataItem.id} bgImg={dataItem.bgImg} classes={sectionClasses} description={dataItem.description} delete_menu_id={dataItem.id} text_id={dataItem.text_id} actions={actions} bgvideo={dataItem.bgvideo}></DatabaseSection>

...
) 

А в DatabaseSection есть еще один компонент - span со ссылками, при клике на ссылку нужно вызывать handleClick и менять состояние scroll, но проблема в том, что состояние и handle находятся в другом файле.

Есть ли возможность импортировать state и handleClick в Home и в компоненты поменьше? Или придется вешать handleClick на Home и получать доступ к элементу по которому кликнули через несколько e.target?

То есть структура такая. Хочу кликнуть на Home (state, handleClick) -> DatabaseSection -> span_menu -> Link.onClick(handleClick) А в handleClick вызываем setScroll. Как мне в самом последнем компоненте Link использовать handleClick из компонента Home?

Ответы

Ответов пока нет.