ReactJS类型脚本:类型'数字'不能分配给类型'0 |8 |16 |24 |32 |40 |不明确的' [英] ReactJS Typescript: Type 'number' is not assignable to type '0 | 8 | 16 | 24 | 32 | 40 | undefined'

问题描述

我想从type-ui中复制 grid 以使用打字稿进行反应.可以在此处找到现场演示.

I would like to reproduce a grid from material-ui in react using typescript. A live demo can be found here.

我已将示例调整为与打字稿一起使用，以使我的demo.jsx看起来像:

I have adjusted the example to work with typescript such that my demo.jsx looks as:

import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import FormLabel from '@material-ui/core/FormLabel';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import RadioGroup from '@material-ui/core/RadioGroup';
import Radio from '@material-ui/core/Radio';
import Paper from '@material-ui/core/Paper';
import {WithStyles} from "@material-ui/core/styles/withStyles";

const styles = (theme:any) => ({
    root: {
        flexGrow: 1,
    },
    paper: {
        height: 140,
        width: 100,
    },
    demo: {
        height: 140,
        width: 100,
    },
    control: {
        padding: theme.spacing.unit * 2,
    },
});

class App extends React.Component<WithStyles<typeof styles>> {
    state = {
        spacing: '16',
    };

    handleChange = (key:any) => (event:any, value:any) => {
        this.setState({
            [key]: value,
        });
    };

    render() {
        const { classes } = this.props;
        const { spacing } = this.state;

        return (
            <Grid container className={classes.root} spacing={16}>
                <Grid item xs={12}>
                    <Grid container className={classes.demo} justify="center" spacing={Number(spacing)}>
                        {[0, 1, 2].map(value => (
                            <Grid key={value} item>
                                <Paper className={classes.paper} />
                            </Grid>
                        ))}
                    </Grid>
                </Grid>
                <Grid item xs={12}>
                    <Paper className={classes.control}>
                        <Grid container>
                            <Grid item>
                                <FormLabel>spacing</FormLabel>
                                <RadioGroup
                                    name="spacing"
                                    aria-label="Spacing"
                                    value={spacing}
                                    onChange={this.handleChange('spacing')}
                                    row
                                >
                                    <FormControlLabel value="0" control={<Radio />} label="0" />
                                    <FormControlLabel value="8" control={<Radio />} label="8" />
                                    <FormControlLabel value="16" control={<Radio />} label="16" />
                                    <FormControlLabel value="24" control={<Radio />} label="24" />
                                    <FormControlLabel value="32" control={<Radio />} label="32" />
                                    <FormControlLabel value="40" control={<Radio />} label="40" />
                                </RadioGroup>
                            </Grid>
                        </Grid>
                    </Paper>
                </Grid>
            </Grid>
        );
    }
}

export default withStyles(styles)(App);

问题是，它引发了以下错误:

The problem is, that it throws the following error:

(101,79): Type 'number' is not assignable to type '0 | 8 | 16 | 24 | 32 | 40 | undefined'.

在以下行中:

<Grid container className={classes.demo} justify="center" spacing={Number(spacing)}>

有什么想法吗?我的第一个猜测是，我需要排版设置间隔为数字类型.由于我对打字稿还很陌生，所以找不到正确的解决方案.

Any ideas? My first guess was that I need to typeset that spacing is of type number. As I am quite new to typescript, I could not find the right solution.

推荐答案

看起来 Grid 不接受任何数字，但接受一组受限制的数字，称为 GridSpacing .参见类型声明

It looks like Grid accepts not any number, but a restricted set of numbers called GridSpacing. See the type declaration 1 and 2. So after converting to a number as you did, you'll need to cast that number to a GridSpacing:

<Grid container className={classes.demo} justify="center" spacing={Number(spacing) as GridSpacing}>

并添加到您的导入中:

import { GridSpacing } from '@material-ui/core/Grid';

这篇关于ReactJS类型脚本:类型'数字'不能分配给类型'0 |8 |16 |24 |32 |40 |不明确的'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！