如何从材料 UI 向函数添加状态

Question

所以我有一个来自Material UI的布局。函数名称称为主菜单。它是函数形式，但我想向它添加状态。我该怎么做？我尝试将其转换为类，但我不知道材料 ui 是如何工作的......我删除了一些代码，以减少不必要的位。

const styles = theme => ({
appBar: {
position: 'relative',
},
icon: {
marginRight: theme.spacing.unit * 2,
},
heroUnit: {
backgroundColor: '#fff',
},
heroUnits: {
backgroundColor: '#fff',
},
heroContent: {
backgroundColor: '#fff',
maxWidth: 600,
margin: '0 auto',
padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`,
},
heroButtons: {
marginTop: theme.spacing.unit * 4,
},
layout: {
backgroundColor: '#fff',
width: 'auto',
marginLeft: theme.spacing.unit * 3,
marginRight: theme.spacing.unit * 3,
[theme.breakpoints.up(1100 + theme.spacing.unit * 3 * 2)]: {
width: 1100,
marginLeft: 'auto',
marginRight: 'auto',
},
},
cardGrid: {
padding: `${theme.spacing.unit * 8}px 0`,
},
card: {
height: '100%',
display: 'flex',
flexDirection: 'column',
},
cardMedia: {
paddingTop: '56.25%', // 16:9
},
cardContent: {
flexGrow: 1,
},
footer: {
backgroundColor: '#fff',
padding: theme.spacing.unit * 6,
},
});

function MainMenu(props) {
const { classes } = props;
return (
<React.Fragment>
<CssBaseline />
<div className={classes.heroUnits}>
<AppBar position="static" className={classes.appBar}>
<Toolbar>
<Typography variant="h6" color="inherit" noWrap>
Dashboard
</Typography>
</Toolbar>
</AppBar>
<main>
<div className={classes.heroUnit}>
<div className={classes.heroContent}>
<Typography component="h1" variant="h2" align="center" color="textPrimary" gutterBottom>
Synapse
</Typography>
</div>
</div>
<div className={classNames(classes.layout, classes.cardGrid)}>

</div>
</main>
</div>
</React.Fragment>
);
}
MainMenu.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(MainMenu);

Answer 1

删除了一些代码以提高可读性，这就是您在 React 中进行条件渲染的方式。

class MainMenu extends React.Component {
state = { shouldIRender: false}
const { classes } = this.props;
return (
<React.Fragment>
{this.state.shouldIRender ? <p>sure, render</p> : <p>not rendering</p>}
</React.Fragment>
);
}