使用自定义钩子在 React Typescript 中传递道具

Question

我制作了一个自定义的useToggler 钩子，我正在尝试将切换道具从它传递给标题中的按钮子项。当我尝试 toggle={toggle} 我得到错误：

类型 '{toggle: () => void;}' 不可分配给类型 'IntrinsicAttributes & { children?: ReactNode; }'。

我怎样才能用 typescript 做到这一点？

import './style/app.css';
import Header from './components/Header';
import SideDrawer from './components/SideDrawer'
import Backdrop from'./components/Backdrop'
import useToggler from "./components/UseToggler";

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

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

export default App;

Answer 1

您会收到类似的错误，因为您违反了接口类型检查。组件应该有一个强制属性。您可以通过传播要传递的道具来避免此错误：

<Header {...toggler} />