React,打字稿文档

时间:2018-07-27 07:46:27

标签: reactjs typescript

import React from 'react';

import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';

const ScInput = (props) => {
    const {
        name,
        label,
        type = 'text',
        /** @type FormikProps */
        formik,
    } = props;

    const isTouched = formik.touched[name];
    const error = formik.errors[name];
    const value = formik.values[name];

    const isError = error && isTouched;
    const ariaDescribedby = `${name}-text`;

    return (
        <FormControl error={isError} aria-describedby={ariaDescribedby}>
            <InputLabel htmlFor={name}>{label}</InputLabel>
            <Input
                id={name}
                value={value}
                type={type}
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
            />
            <FormHelperText id={ariaDescribedby}>{error}</FormHelperText>
        </FormControl>
    );
};

const getFormik = (props) => {
    /**
     * @typedef {Object} FormikProps
     * @property {Object} values
     * @property {Object} touched
     * @property {Object} errors
     * @property {Function} handleChange
     * @property {Function} handleBlur
     */
    return {
        values: props.values,
        touched: props.touched,
        errors: props.errors,
        handleChange: props.handleChange,
        handleBlur: props.handleBlur,
    };
};

export default {
    component: ScInput,
    getFormik,
};

大家好!我试图创建一个自定义组件,并在我的项目中使用它。但是JSX中的自动完成功能无效。

ScInput.d.ts应该是什么样子?使JSX中的Webshtorm能够自动完成工作。我的意思是<ScInput.component />。还是我应该更改此ScInput.js文件?

0 个答案:

没有答案