Question

我已经制作了一个自定义的useToggler钩子，并且我试图将其中的切换道具传递给Header中的子按钮。当我尝试toggle = {toggle}时收到错误消息：

类型'{toggle：（）=> void;}'不可分配给类型'IntrinsicAttributes＆{children ?: ReactNode; }'。

我如何用打字稿实现？

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} />

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

1 个答案: