передача реквизита между компонентами React с помощью Typescript

Question

Я пытаюсь передать useToggle пользовательские реквизиты Hook кнопке в компоненте <DrawerToggleButton/>, и мне нужна помощь

Я импортировал хук useToggler в приложение, и у меня есть пропуска с оператором распространения в <Header/> component

const App = () => {
    const [show, toggle]=useToggler();

    return (
        <div className="App">
            <Header {...toggle} />
            <SideDrawer/>
            <Backdrop/>
            <main style={{marginTop:'56px'}}>
                <p>Page content</p>
            </main>
        </div>
    );
}

export default App;

Затем я попытался передать реквизиты в <DrawerToggleButton/>, и я не знаю, нормально ли это ..

const Header: React.FC = (props) => {
    return (
        <header className="toolbar">
            <nav className="toolbar—navigation">
                <DrawerToggleButton {...props}/>
                <div className="toolbar—logo"><a href="">Logo</a></div>
                <div className="spacer"></div>
                <div className="toolbar—items">
                    <ul>
                        <li><a href="">LogIn</a></li>
                        <li><a href="">SignUp</a></li>
                    </ul>
                </div>
            </nav>
        </header>
    )
};

export default Header

Моя цель - сделать свойство onClick на работу ....

onst DrawerToggleButton: React.FC = () => {



    return (
        <button className="toggle—button" onClick={?}>
            <div className="toggle—button—line">{}</div>
            <div className="toggle—button—line"></div>
            <div className="toggle—button—line"></div>
        </button>
    )
};

export default DrawerToggleButton

Переключатель - это функция clickHandler:

function useToggler (defaultOnValue=false):[boolean, ()=>void]{
    const [isToggled,setIsToggled]=useState(defaultOnValue);

    function clickHandler(){
        setIsToggled((prev)=>!prev)
    }
    return[isToggled, clickHandler]
}

export default useToggler

Answer 1

Вы можете сделать что-то вроде этого:

В App.tsx вместо const [show, toggle]=useToggler(); вы можете написать const toggler = useToggler(); без деконструкции массива.

Затем передать его через реквизиты <Header toggler={toggler} /> и <DrawerToggleButton toggler={toggler} />.

Наконец, в DrawerToggleButton получите доступ к обработчику onClick из toggler[1]

---

Вы также можете просто изменить App.tsx, чтобы передать обработчик переключения через <Header toggle={toggle} /> и используйте переданные реквизиты в DrawerToggleButton, чтобы получить обработчик onClick из props.toggle