我正在尝试在另一个页面中将material-ui选项卡呈现为组件。
尝试使用此组件加载页面时,我一直收到此错误,我的代码在这里中断。
我尝试了2种不同的渲染方式,这直接来自material-ui。它可以在沙箱中工作,但是在我的构建中不会渲染。
import React from "react";
// nodejs library that concatenates classes
import classNames from "classnames";
// nodejs library to set properties for components
import SwipeableViews from "react-swipeable-views";
// @material-ui/core components
import PropTypes from 'prop-types';
import withStyles from "@material-ui/core/styles/withStyles";
// @material-ui/icons
import { makeStyles } 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';
function TabContainer(props) {
return (
<Typography component="div" style={{ padding: 8 * 3 }}>
{props.children}
</Typography>
);
}
TabContainer.propTypes = {
children: PropTypes.node.isRequired,
};
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: '100%',
backgroundColor: theme.palette.background.paper,
},
}));
const handleChange = (event, newValue) => {
setValue(newValue);
}
const [value, setValue] = React.useState(0);
class DetailPills extends React.Component {
constructor(props) {
super(props);
this.state = {
active: props.active
};
this.handleChange = this.handleChange.bind(this)
}
render() {
const classes = useStyles();
return (
<div>
<Tabs
value={value}
onChange={handleChange}
indicatorColor="transparent"
textColor="primary"
>
<Tab className="btn btn-blk btn-pill" label="Identity Checks" active />
<Tab className="btn btn-blk btn-pill" label="Academic Qualifications" />
<Tab className="btn btn-blk btn-pill" label="Credit Checks" />
<Tab className="btn btn-blk btn-pill" label="Criminal Checks" />
<Tab className="btn btn-blk btn-pill" label="Employment Checks" />
<Tab className="btn btn-blk btn-pill" label="Enatis Checks" />
</Tabs>
<div className="tab-content">
{value === 0 &&
<TabContainer className="screening-items">
Test
</TabContainer>}
{value === 1 &&
<TabContainer className="screening-items">
Second info
</TabContainer>}
{value === 2 && <TabContainer className="screening-items">Item Three</TabContainer>}
{value === 3 && <TabContainer className="screening-items">Item Four</TabContainer>}
{value === 4 && <TabContainer className="screening-items">Item Five</TabContainer>}
{value === 5 && <TabContainer className="screening-items">Item Six</TabContainer>}
{value === 6 && <TabContainer className="screening-items">Item Seven</TabContainer>}
</div>
</div>
);
}
}
export default withStyles(DetailPills);
它需要呈现此组件。
最佳答案
这里的问题是,您已经在组件外部编写了handleChange
函数,并且还在组件外部声明了状态,例如,
const handleChange = (event, newValue) => {
setValue(newValue);
}
const [value, setValue] = React.useState(0);
class DetailPills extends React.Component {
...
}
根据docs,
挂钩是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能。
您的主要问题是,您正在将
Hooks
与基于class
的组件一起使用,这是使用Hooks
的错误方法。 React Hooks
被构建为仅与functional
组件一起使用。因此正确的代码可能像这样,
function DetailPills(props) {
const [active, setActive] = React.useState(props.active);
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
}
const classes = useStyles();
return (
<div>
<Tabs
value={value}
onChange={handleChange}
indicatorColor="transparent"
textColor="primary"
>
<Tab className="btn btn-blk btn-pill" label="Identity Checks" active />
<Tab className="btn btn-blk btn-pill" label="Academic Qualifications" />
<Tab className="btn btn-blk btn-pill" label="Credit Checks" />
<Tab className="btn btn-blk btn-pill" label="Criminal Checks" />
<Tab className="btn btn-blk btn-pill" label="Employment Checks" />
<Tab className="btn btn-blk btn-pill" label="Enatis Checks" />
</Tabs>
<div className="tab-content">
{value === 0 &&
<TabContainer className="screening-items">
Test
</TabContainer>}
{value === 1 &&
<TabContainer className="screening-items">
Second info
</TabContainer>}
{value === 2 && <TabContainer className="screening-items">Item Three</TabContainer>}
{value === 3 && <TabContainer className="screening-items">Item Four</TabContainer>}
{value === 4 && <TabContainer className="screening-items">Item Five</TabContainer>}
{value === 5 && <TabContainer className="screening-items">Item Six</TabContainer>}
{value === 6 && <TabContainer className="screening-items">Item Seven</TabContainer>}
</div>
</div>
);
}