Question

我正在尝试将useToggle自定义Hook道具传递给<DrawerToggleButton/>组件中的按钮，我需要帮助

我已经在App中导入了useToggler挂钩，并且我在<Header/>组件中使用了带有传播算子的传递道具

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

toggle是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中，从toggler[1]访问onClick处理程序

您还可以更改App.tsx以通过<Header toggle={toggle} />传递切换处理程序，并使用DrawerToggleButton中传递的道具从{{1 }}

使用Typescript在React组件之间传递道具

1 个答案: