[英]Passing props in React Typescript using custom hooks
I have made a custom useToggler
hook, and i am trying to pass toggle props from it to button child in Header.我制作了一个自定义的
useToggler
钩子,我试图将它的切换道具传递给 Header 中的按钮子级。 When i try toggle={toggle} i get error:当我尝试 toggle={toggle} 时,我收到错误:
Type '{toggle: () => void;}' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode;
类型 '{toggle: () => void;}' 不可分配给类型 'IntrinsicAttributes & { children?: ReactNode; }'.
}'。
How can i achieve that with 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;
You'll get a similar error, since you're violating the interface typecheck.你会得到一个类似的错误,因为你违反了接口类型检查。 The Component should have a mandatory prop.
组件应该有一个强制性的道具。 You can avoid this error by spreading the props you want to pass as:
您可以通过传播要传递的道具来避免此错误:
<Header {...toggler} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.