我尝试使用在主“ App.tsx”文件的“ App2.tsx”文件中定义的类和所有变量。 问题：在我的主文件中，出现错误： 未定义“找不到名称类别”类别 找不到“找不到名片ZZZ”卡ZZZ
如果有人能帮助我会很感激。
App2.tsx
import React from "react";
import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import Toolbar from "@material-ui/core/Toolbar";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
//import GridListTile from "@material-ui/core/GridListTile";
//import ListSubheader from "@material-ui/core/ListSubheader";
//import FormGroup from '@material-ui/core/FormGroup';
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import AppBar from "@material-ui/core/AppBar";
import Box from "@material-ui/core/Box";
//import clsx from "clsx";
import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
//import FormHelperText from '@material-ui/core/FormHelperText';
//import { withStyles } from '@material-ui/core/styles';
import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/Menu";
//import ListItemIcon from '@material-ui/core/ListItemIcon';
//import ListItemText from '@material-ui/core/ListItemText';
//import InboxIcon from '@material-ui/icons/MoveToInbox';
//import DraftsIcon from '@material-ui/icons/Drafts';
//import SendIcon from '@material-ui/icons/Send';
//import PropTypes from "prop-types";
//import Image from '../img/main.jpg'; // Import using relative path
//import { withStyles } from "@material-ui/styles";
//import Snackbar from "@material-ui/core/Snackbar";
import MuiAlert, { AlertProps } from "@material-ui/lab/Alert";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Dialog from "@material-ui/core/Dialog";
import ListItemText from "@material-ui/core/ListItemText";
import ListItem from "@material-ui/core/ListItem";
import List from "@material-ui/core/List";
import Divider from "@material-ui/core/Divider";
import CloseIcon from "@material-ui/icons/Close";
import Slide from "@material-ui/core/Slide";
import { TransitionProps } from "@material-ui/core/transitions";
export function Alert(props: AlertProps) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
export const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
flexGrow: 1,
//minWidth: 275,
flexWrap: "wrap"
//width: "100%"
},
bullet: {
display: "inline-block",
margin: "0 2px",
transform: "scale(0.8)"
},
appBar: {
position: "relative"
},
title: {
fontSize: 20,
flexGrow: 1,
marginLeft: theme.spacing(2) //ADD.L
},
pos: {
marginBottom: 12
},
menuButton: {
marginRight: theme.spacing(2)
},
paper: {
padding: theme.spacing(1),
textAlign: "center",
color: theme.palette.text.secondary
},
paperContainer: {
backgroundImage: `url(${Image})`
},
icon: {
//alignItems: 'center',
borderRadius: 3,
width: 16,
height: 16,
boxShadow:
"inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)",
backgroundColor: "#f5f8fa",
backgroundImage:
"linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))",
"$root.Mui-focusVisible &": {
outline: "2px auto rgba(19,124,189,.6)",
outlineOffset: 2
},
"input:hover ~ &": {
backgroundColor: "#ebf1f5"
},
"input:disabled ~ &": {
boxShadow: "none",
background: "rgba(206,217,224,.5)"
}
},
checkedIcon: {
//alignItems: 'center',
backgroundColor: "#137cbd",
backgroundImage:
"linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))",
"&:before": {
display: "block",
width: 16,
height: 16,
backgroundImage:
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
" fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
"1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
content: '""'
},
"input:hover ~ &": {
backgroundColor: "#106ba3"
}
}
})
);
export const Transition = React.forwardRef(function Transition(
props: TransitionProps & { children?: React.ReactElement },
ref: React.Ref<unknown>
) {
return <Slide direction="up" ref={ref} {...props} />;
});
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function CLASS_CARDS() {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClickClose = () => {
setOpen(false);
};
let nameOfMyCard: string;
let topic1OfMyCard: string;
let content_topic1OfMyCard: string;
let topic2OfMyCard: string;
let content_topic2OfMyCard: string;
/*
for (var i=0; i <1; i++){
nameOfMyCard= "Card 0" + (i+1);
}*/
class class_cards {
public Cards() {
//console.log(this);
return (
<Grid item xs={12}>
<Card className={classes.root} variant="outlined">
<CardContent>
<Typography
className={classes.title}
color="textSecondary"
gutterBottom
>
{nameOfMyCard} {/* <----- 1st class element */}
</Typography>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.root}>
{topic1OfMyCard} {/* <----- 2nd class element */}
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>{content_topic1OfMyCard}</Typography>{" "}
{/* |||||||| */}
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2a-content"
id="panel2a-header"
>
<Typography className={classes.root}>
{topic2OfMyCard} {/* |||||||| */}
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>{content_topic2OfMyCard}</Typography>{" "}
{/* ||||||| */}
</AccordionDetails>
</Accordion>
</CardContent>
<CardActions>
<Button fullWidth={true}>
<IconButton size="small">
<Alert severity="info">LEARN MORE</Alert>
</IconButton>
</Button>
</CardActions>
{/*---------------------------------Full Screen----------------------------------*/}
<Button
variant="outlined"
color="primary"
onClick={handleClickOpen}
fullWidth={true}
>
Open full-screen
</Button>
<Dialog
fullScreen
open={open}
onClose={handleClickClose}
TransitionComponent={Transition}
>
<AppBar className={classes.appBar}>
<Toolbar>
<IconButton
edge="start"
color="inherit"
onClick={handleClickClose}
aria-label="close"
>
<CloseIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
Title
</Typography>
{/*<Button
autoFocus
color="inherit"
onClick={handleClickClose}
>
save
</Button>*/}
</Toolbar>
</AppBar>
<List>
<ListItem button>
<ListItemText primary="Phone ringtone" secondary="Titania" />
</ListItem>
<Divider />
<ListItem button>
<ListItemText
primary="Default notification ringtone"
secondary="Tethys"
/>
</ListItem>
</List>
</Dialog>
{/*--------------------------------Full Screen-----------------------------------*/}
</Card>
</Grid>
);
}
}
const crd1 = new class_cards();
const cardZZZ = [];
for (let i = 0; i < 3; i++) {
if ((i + 1) % 2) {
nameOfMyCard = "Card 0" + (i + 3);
topic1OfMyCard = "TOPIC 1";
content_topic1OfMyCard = "HELLO";
topic2OfMyCard = "TOPIC2 ";
content_topic2OfMyCard = "BYE";
}
if (i % 2) {
nameOfMyCard = "Card 0" + (i * 2 + 1);
}
// cardZZZ.push(nameOfMyCard= "Card 0" + (i))
cardZZZ.push(<crd1.Cards key={i} />);
}
}
App.tsx
import React from "react";
import "./styles.css";
import { CLASS_CARDS, useStyles, Transition } from "./App2";
function App() {
//class class_cards{};
//return <div className={classes(useStyles).root}>{cardZZZ(CLASS_CARDS)}</div>;
return <div className={classes.root}>{cardZZZ}</div>;
}