Question

我正在尝试将此功能组件转换为基于类的组件。我已经尝试了几个小时，但是找不到将这些const变量放置在组件中的位置。如果有人可以在基于类的组件中将其写出来，它将受到高度赞赏。

const useStyles = makeStyles(theme => ({
  typography: {
    padding: theme.spacing(2),
  },
}));
function SimplePopper() {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);

  function handleClick(event) {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  }

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popper' : null;

  return (
    <div>
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        Toggle Popper
      </Button>
      <Popper id={id} open={open} anchorEl={anchorEl} transition>
        {({ TransitionProps }) => (
          <Fade {...TransitionProps} timeout={350}>
            <Paper>
              <Typography className={classes.typography}>The content of the Popper.</Typography>
            </Paper>
          </Fade>
        )}
      </Popper>
    </div>
  );
}

export default SimplePopper;

Answer 1

    import React, { Component } from "react";
    import { createMuiTheme } from "@material-ui/core/styles";
    import Typography from "@material-ui/core/Typography";
    import Button from "@material-ui/core/Button";
    import Fade from "@material-ui/core/Fade";
    import Paper from "@material-ui/core/Paper";
    import Popper from "@material-ui/core/Popper";
    import { withStyles } from "@material-ui/styles";

    const theme = createMuiTheme({
      spacing: 4
    });

    const styles = {
      typography: {
        padding: theme.spacing(2)
      }
    };
    class SimplePopper extends Component {
      constructor(props) {
        super(props);
        this.state = { anchorEl: null, open: false };
      }
      flipOpen = () => this.setState({ ...this.state, open: !this.state.open });
      handleClick = event => {
        this.state.ancherEl
          ? this.setState({ anchorEl: null })
          : this.setState({ anchorEl: event.currentTarget });
        this.flipOpen();
      };

      render() {
        const open = this.state.anchorEl === null ? false : true;
        console.log(this.state.anchorEl);
        console.log(this.state.open);
        const id = this.state.open ? "simple-popper" : null;
        const { classes } = this.props;
        return (
          <div>
            <Button
              aria-describedby={id}
              variant="contained"
              onClick={event => this.handleClick(event)}
            >
              Toggle Popper
            </Button>
            <Popper
              id={id}
              open={this.state.open}
              anchorEl={this.state.anchorEl}
              transition
            >
              {({ TransitionProps }) => (
                <Fade {...TransitionProps} timeout={350}>
                  <Paper>
                    <Typography className={classes.typography}>
                      The content of the Popper.
                    </Typography>
                  </Paper>
                </Fade>
              )}
            </Popper>
          </div>
        );
      }
    }

    export default withStyles(styles)(SimplePopper);

Answer 2

首先需要了解的是class based和functional组件的工作方式。此外，何时何地使用它。

简而言之，我可以说功能组件用于呈现静态数据。并且基于类用于动态数据源。

以下链接供您参考。

Class based component vs Functional components what is the difference ( Reactjs )和React functional components vs classical components

回答您的特定问题。

import React, { Component } from 'react';
import { withStyles, makeStyles } from '@material-ui/styles';

const useStyles = makeStyles(theme => ({
      typography: {
        padding: theme.spacing(2),
      },
}));

class SimplePopper extends Component {
   constructor(props){
      super(props)
      this.state = { anchorEl: null, setAnchorEl: null }; <--- Here see the state creation
      this.handleClick= this.handleClick.bind(this);
    }

   handleClick(event) {
        const { anchorEl, setAnchorEl } = this.state; <--- Here accessing the state
        setAnchorEl(anchorEl ? null : event.currentTarget);
   }

   render() {
      const { anchorEl, setAnchorEl } = this.state; <--- Here accessing the state
      const open = Boolean(anchorEl);
      const id = open ? 'simple-popper' : null;
      const { classes } = this.props;

      return (
        <div>
           ............Rest of the JSX............
        </div>
      );
    }
 }
export default withStyles(useStyles)(SimplePopper);

请注意，这里我使用withStyles将样式包装到您的组件中。因此，样式将以classNames的形式提供。

探索差异并转换其余部分

这已经足够了。

如何将Popover MATERIAL-UI功能组件转换为基于类的组件？

2 个答案: