如何在功能组件中使用 Flow 检查道具，以便我可以直接使用道具变量？答案

【问题标题】：How to check props with Flow in functional component so I can use props variables directly?如何在功能组件中使用 Flow 检查道具，以便我可以直接使用道具变量？
【发布时间】：2021-05-06 10:30:43
【问题描述】：

我想直接将 props 用作变量，而不在它们前面添加 props 对象。

喜欢：onChange={handleChange}，而不是onChange={props.handleChange}

   type Props = {
        handleChange: Function,
        values: Object,
        t: Function
    }
    
    function RadioList(props: Props) {
        return (
            <div className={css.radioList}>
                <RadioField
                    isFormik
                    name="some_name"
                    label={t('some_label')}
                    onChange={handleChange}
                    className={css.listFilterRadio}
                />
            </div>);
    }

【问题讨论】：

标签： javascript reactjs types flowtype

【解决方案1】：

  type Props = {
        handleChange: Function,
        values: Object,
        t: Function
    }
    
    function RadioList(props: Props) {
        const { handleChange } = props; //  destructuring the props
        const { radioList, listFilterRadio } = css; // you can destrcture your css varible too if you are getting it from somewhere
        return (
            <div className={radioList}>
                <RadioField
                    isFormik
                    name="some_name"
                    label={t('some_label')}
                    onChange={handleChange}
                    className={listFilterRadio}
                />
            </div>);
    }

【讨论】：

【解决方案2】：

使用destructuring assignment。

    function RadioList({handleChange}) {
    return (
        <div className={css.radioList}>
            <RadioField
                isFormik
                name="some_name"
                label={t('some_label')}
                onChange={handleChange}
                className={css.listFilterRadio}
            />
        </div>);
}

【讨论】：