[英]How to pass a function with parameters in react with typescript
I want to pass a handleClick to the son so I don't have to do it twice.我想将 handleClick 传递给儿子,所以我不必做两次。 The code is the following:
代码如下:
Mother:母亲:
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}/>
</>
)
}
Son:儿子:
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 : ''}/>
//...
</>
)
}
Basically this sets the background color in case an option is selected or not.基本上,这会设置背景颜色,以防选择或不选择选项。 MyComponent is a component that takes that props (and/or others) and sets its own content.
MyComponent是一个组件,它采用该道具(和/或其他)并设置自己的内容。
This throws the type error _onClick is not a function .这会引发类型错误_onClick is not a function 。 I believe I didn't do it properly.. What did I miss, in your opinion?
我相信我没有正确地做到这一点。在你看来,我错过了什么?
const Son: React.FC<{ selectedOption?: string | '', onClick?: (href: string, section: string) => void | void, customSectionStyle?: string | '' }> = (selectedOption, onClick, customSectionStyle)
Replace with用。。。来代替
const Son: React.FC<{ selectedOption?: string, onClick?: (href: string, section: string) => void, customSectionStyle?: string }> = ({ selectedOption, onClick, customSectionStyle })
Son Will be called with all props that you've to Destructur it or directly read from props儿子将被调用所有你必须破坏它的道具或直接从道具中读取
(selectedOption, onClick, customSectionStyle) should be ({selectedOption, onClick, customSectionStyle}) (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: ''}/> //... ) }
are you sure about returning two adjacent MyComponent over there?你确定要在那里返回两个相邻的 MyComponent 吗? And I think that you miss the curly braces when getting the props in the son component definition =
而且我认为您在获取子组件定义中的道具时会错过花括号=
({ selectedOption, onClick, customSectionStyle })
({ selectedOption, onClick, customSectionStyle })
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.