使用 Typescript 在 React 组件之间传递 props答案

【问题标题】：passing props between React components with Typescript使用 Typescript 在 React 组件之间传递 props
【发布时间】：2020-02-20 20:31:11
【问题描述】：

我正在尝试将 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

【问题讨论】：

什么是toggle？是Iterable吗？
为什么不将props 添加到组件DrawerToggleButton 函数参数中？您是否也简单地尝试过记录道具（在将props 添加到DrawerToggleButton 之后）看看会发生什么？
我试过了，还是不行……
有几件事，首先是setIsToggled，我认为应该只是setIsToggled(!isToggled) - 在您的情况下，您将其设置为返回与其参数相反的函数。就其他可能不起作用的情况而言，您的 useToggle 钩子返回 show 我认为您想用它来隐藏/显示某些东西，但您没有使用它。您还试图解构{...toggle} - toggle 是一个clickHandler，所以您不能这样做，只需像普通道具一样传递它。 handleOnClick={toggle} 或类似的东西。
@BrettEast setIsToggled(prev => !prev) 实际上是这里的首选方式。如果您向useState setter 提供一个函数，它基本上会将先前的值转换为下一个状态，以规避如果状态方式在setState 中的读取和设置之间发生变化时可能发生的竞争条件@

标签： reactjs typescript react-hooks

【解决方案1】：

你可以这样做：

在App.tsx，而不是 const [show, toggle]=useToggler(); 你可以写 const toggler = useToggler(); 而不解构数组。

然后通过 props <Header toggler={toggler} /> 和 <DrawerToggleButton toggler={toggler} /> 传递它。

最后在DrawerToggleButton 中从toggler[1] 访问onClick 处理程序

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

【讨论】：

当我输入toggle={toggle} 时出现错误：``` TS2322: Type '{ toggle: [boolean, () => void]; }' 不可分配给类型 'IntrinsicAttributes & { children?: ReactNode; }'。类型“IntrinsicAttributes & { children?: ReactNode;”上不存在属性“toggle” }'.```
DrawerToggleButton 不接受 props 作为参数，因此您需要它能够接收 [boolean, () => void] 类型的 toggler
我把它放到了一个快速密码箱中：codesandbox.io/s/xenodochial-cannon-bwt5i