时间戳

首页 > 解决方案 > 文档中的反应示例显示重载错误

reactjs - 文档中的反应示例显示重载错误

问题描述

我们刚刚在 React 中启动了一个项目，我对它很陌生。简而言之，我们希望以响应式的方式将组件放置在我们的网页中。所以我只是在 reacts 文档中尝试以下示例，它不断抛出以下错误，老实说我无法理解：

No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & { alignContent?: GridContentAlignment | undefined; alignItems?: GridItemsAlignment | undefined; ... 13 more ...; zeroMinWidth?: boolean | undefined; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type '{ xs: number; md: number; }' is not assignable to type 'GridSpacing | undefined'.
      Type '{ xs: number; md: number; }' is not assignable to type '9'.
  Overload 2 of 2, '(props: DefaultComponentProps<GridTypeMap<{}, "div">>): Element', gave the following error.
    Type '{ xs: number; md: number; }' is not assignable to type 'GridSpacing | undefined'.
      Type '{ xs: number; md: number; }' is not assignable to type '9'.ts(2769)
Grid.d.ts(141, 5): The expected type comes from property 'spacing' which is declared here on type 'IntrinsicAttributes & { component: ElementType<any>; } & { alignContent?: GridContentAlignment | undefined; alignItems?: GridItemsAlignment | undefined; ... 13 more ...; zeroMinWidth?: boolean | undefined; } & CommonProps<...> & Pick<...>'
Grid.d.ts(141, 5): The expected type comes from property 'spacing' which is declared here on type 'IntrinsicAttributes & { alignContent?: GridContentAlignment | undefined; alignItems?: GridItemsAlignment | undefined; ... 13 more ...; zeroMinWidth?: boolean | undefined; } & CommonProps<...> & Pick<...>'
(JSX attribute) spacing?: GridSpacing | undefined
Defines the space between the type item component. It can only be used on a type container component.

显然，导致错误的代码块是这样的

spacing={{ xs: 2, md: 3 }}

我知道这对专家来说可能很简单，但正如我提到的，我刚刚开始学习 React。解决方案是什么，所以我应用该示例而没有任何错误？

编辑：添加了完整的代码

import { Box, Grid, Paper, styled } from '@material-ui/core';

const Item = styled(Paper)(({ theme }) => ({
    ...theme.typography.body2,
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
}));

function App() {
    return (
        <Box sx={{ flexGrow: 1 }}>
            <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
                {Array.from(Array(6)).map((_, index) => (
                    <Grid item xs={2} sm={4} md={4} key={index}>
                        <Item>xs=2</Item>
                    </Grid>
                ))}
            </Grid>
        </Box>
    );
}

export default App;

标签： reactjsoverloading

解决方案

我猜你不是在容器元素上使用它。最好粘贴代码以验证这一点。只需在错误消息的最后一行记下。

定义类型项组件之间的空间。它只能用于类型容器组件。

推荐阅读