Как типизировать hooks и передать его потомку?

Question

[Александр Шоу]

Это родительский компонент

export const InputContainer:React.FC = (props) => {
    const classes = useStyles()
    const[open,setOpen] = useState<boolean>(false)

    return (
        <div className={classes.root}>
            <Collapse in={open}>
            <b>    <InputCard setOpen={setOpen}/></b>
            </Collapse>
            <Collapse in={!open}>
                <Paper
                    className={classes.addCard}
                    elevation={0}
                >
                    <Typography
                        onClick={() => setOpen(!open)}

                    > + Добавить</Typography>
                </Paper>
            </Collapse>

        </div>
    )
}

Это дочерний компонент InputCard

export interface inputOpenType  {
    setOpen: any,
}



export const InputCard:React.FC<inputOpenType> = ({setOpen}) => {
    const classes = useStyles()

    return (
        <div>
            <div >
                <Paper className={classes.card} >
                    <InputBase
                        multiline
                        fullWidth
                        placeholder={'Добавить'}
                    />
                </Paper>
            </div>
            <div className={classes.btnBlock}>
                <Button
                    className={classes.btnSetting}
                    onClick={() => setOpen(false)} // НОРМАЛЬНАЯ ЛИ ПРАКТИКА?
                >Добавить</Button>
                <IconButton>
                    <ClearIcon  onClick={() => setOpen(false)}/>
                </IconButton>
            </div>
        </div>
    )
}

Скажите как типизировать setOpen который я хочу передать в InputCard его правильно?
И я является ли это хорошей практикой? Не нарушает ли идеологию Реакт?

Comments

[WbICHA]

Так а в чём проблема? Вот у вас есть интерфейс:

export interface inputOpenType  {
    setOpen: any,
}

Замените эни на нужный тип.

[Александр Шоу]

все остальные типы выводят ошибки
Подскажи противоречит ли передача setOpen идеалогии реакт? или может это антипаттрен какой нить?

[xenonhammer]

Александр Шоу, Просто нужно типы гуглить/знать

Answer 1

[xenonhammer]

Ну вот так будет выглядить

export const InputCard:React.FC<{
  open: boolean
  setOpen: Dispatch<SetStateAction<boolean>>
}> = ({setOpen}) => {
    const classes = useStyles()

    return (

Ну или можете setOpen: (arg0:boolean)=>void

Comments

[xenonhammer]

p.s. Практика нормальная