如何传递带有参数的函数以与打字稿反应答案

【问题标题】：How to pass a function with parameters in react with typescript如何传递带有参数的函数以与打字稿反应
【发布时间】：2021-04-04 09:43:36
【问题描述】：

我想将 handleClick 传递给儿子，这样我就不必做两次了。代码如下：

妈妈：

const Mother = () => {
    const [selectedOption, setSelectedOption] = useState<'rooms' | 'questions' | 'notifications'>('rooms')

    const customSectionStyle = 'bg-primary-500 text-white hover:bg-primary-600'

    //handle click
    const handleClick = (href, section) => {
      setSelectedOption(section);
      router.push(href)
    }
    return(
        <>
            <Son onClick={() => handleClick} selectedOption={selectedOption} customSectionStyle={customSectionStyle}/>
        </>
    )
}

儿子：

const Son: React.FC<{ selectedOption?: string | '', onClick?: (href: string, section: string) => void | void, customSectionStyle?: string | '' }> = (selectedOption, onClick, customSectionStyle) => {
    return(
        <>
            <MyComponent onClick={() => {onClick('/','home')}} customStyle={selectedOption === 'rooms' ? customSectionStyle : ''}/>
            <MyComponent onClick={() => {onClick('/','settings')}} customStyle={selectedOption === 'settings' ? customSectionStyle : ''}/>
        //...
        </>
    )
}

基本上，这会设置背景颜色，以防选择或不选择选项。 MyComponent 是一个组件，它采用该道具（和/或其他）并设置自己的内容。

这会引发类型错误_onClick 不是函数。我认为我做得不对。在您看来，我错过了什么？

【问题讨论】：

标签： javascript reactjs typescript next.js

【解决方案1】：

你确定要在那边返回两个相邻的 MyComponent 吗？而且我认为您在获取子组件定义中的道具时会错过花括号=

({ selectedOption, onClick, customSectionStyle })

【讨论】：

哦，是的，代码要大得多，所以我做了一个小例子。我错过了片段！谢谢
现在有另一个问题！在 Son 组件中，onClick 说 Cannot invoke an object which is possible 'undefined'.ts(2722) 并且控制台抛出以下警告：Warning: Can '不在未安装的组件上执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请在 componentWillUnmount 方法中取消所有订阅和异步任务。我该怎么办？
我的意思是 useState 不起作用
尝试将传递给 Son 组件的道具的名称从 onClick 更改为另一个名称“blabbal”，例如，因为我认为问题的根源是该关键字
我将名称更改为 handleClick，但它也不起作用。我还必须将 handleClick={() => handleClick} 更改为 handleClick={handleClick} ，现在它按我想要的方式工作。非常感谢！

【解决方案2】：

const Son: React.FC<{ selectedOption?: string | '', onClick?: (href: string, section: string) => void | void, customSectionStyle?: string | '' }> = (selectedOption, onClick, customSectionStyle)

替换为

const Son: React.FC<{ selectedOption?: string, onClick?: (href: string, section: string) => void, customSectionStyle?: string }> = ({ selectedOption, onClick, customSectionStyle })

【讨论】：

【解决方案3】：

Son 将被调用所有你必须解构它的道具或直接从道具中读取

(selectedOption, onClick, customSectionStyle) 应该是 ({selectedOption, onClick, customSectionStyle})

const Son: React.FC<{ selectedOption?: string | '', onClick?: (href: string, section: string) => void | void, customSectionStyle?: string | '' }> = ({selectedOption, onClick, customSectionStyle}) => {
    return(
        <MyComponent onClick={() => {onClick('/','home')}} customStyle={selectedOption === 'rooms' ? customSectionStyle : ''}/>
        <MyComponent onClick={() => {onClick('/','settings')}} customStyle={selectedOption === 'settings' ? customSectionStyle : ''}/>
        //...
    )
}

【讨论】：