reactjs - 输入'{孩子:从不[]; 当使用带有 Typescript 的 material-ui 时,}' 与类型 'IntrinsicAttributes' 没有共同的属性
问题描述
我是打字稿的新手,并尝试使用现有组件,即 material-ui 中的选项卡。
SimpleTab.ts:
import React from 'react';
import { makeStyles, Theme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
interface TabPanelProps {
children?: React.ReactNode;
index: any;
value: any;
}
function TabPanel(props: TabPanelProps) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && (
<Box p={3}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
function a11yProps(index: any) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
const useStyles = makeStyles((theme: Theme) => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
}));
export default function SimpleTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
tab 1
</TabPanel>
<TabPanel value={value} index={1}>
tab 2
</TabPanel>
<TabPanel value={value} index={2}>
tab 3
</TabPanel>
</div>
);
}
我在主页内使用如下:
主页.ts:
import react , { useRef } from "react";
import SimpleTabs from '../Tabs/Tabs'
export default function Homepage(){
const HomeheaderTabs = useRef<typeof SimpleTabs | null>(null);
return(
{HomeheaderTabs}
)}
我在主页中使用了这个主页,如下所示:
import React from 'react';
import Homepage from '../src/Components/HomePage/Homepage'
export default function App() {
return (<>
<Homepage>
</>;);
}
我在返回该类型没有子错误时收到错误。
我看到了下面的链接,但我正在使用材质 UI。
打字稿样式组件错误:“类型'{孩子:字符串;}'与类型'IntrinsicAttributes'没有共同的属性。”
有什么解决办法吗?