Передача реквизита в React Typescript с использованием пользовательских хуков

Question

Я сделал пользовательский useToggler хук, и я пытаюсь передать переключающие реквизиты от него дочерней кнопке в заголовке. Когда я пытаюсь переключить = {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} />