在 React 的另一个组件中单击按钮的事件侦听器

Question

I am using MapBox in React, where it has a navbar parent. I have a button in the navbar component that collapses the navbar by changing it's class, where I also want to execute the code below in the map component when this button is pressed.

map.easeTo({
padding: {left:300},
duration: 1000
});

I feel like the function addEventListener() can acomplish this, however the navbar and the map are separate components in two different js files.

Thanks for your help.

Answer 1

Wrap them both in a parent component that keeps the navbar state, then pass the state and the state setter to both children. You can also use context, but on that level of nesting it is kind of an overkill

Example:

const Layout = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  return {
    <>
      <Navbar isExpanded={isExpanded} setIsExpanded={setIsExpanded} />
      <Map isExpanded={isExpanded} setIsExpanded={setIsExpanded} />
    </>
  }
}