Как вызвать handle и поменять состояние родителького компонента из дочерних?
У меня есть страница (компонент) 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?