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

Question

我想直接使用 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>);
    }

Answer 1

使用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>);
}

Answer 2

  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>);
    }

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

How to check props with Flow in functional component so I can use props variables directly?

javascript

reactjs

types

flowtype