@AlexShow163
Начинающий верстальщик

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

Это родительский компонент
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 его правильно?
И я является ли это хорошей практикой? Не нарушает ли идеологию Реакт?
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
@xenonhammer
Ну вот так будет выглядить
export const InputCard:React.FC<{
  open: boolean
  setOpen: Dispatch<SetStateAction<boolean>>
}> = ({setOpen}) => {
    const classes = useStyles()

    return (


Ну или можете setOpen: (arg0:boolean)=>void
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы