Как я могу преобразовать функциональный компонент popover MATERIAL-UI в компонент на основе классов? - PullRequest
Новая
       21

Как я могу преобразовать функциональный компонент popover MATERIAL-UI в компонент на основе классов?

0 голосов
/ 04 июня 2019

Я пытаюсь преобразовать этот функциональный компонент в компонент на основе классов.Я пытался в течение нескольких часов, но не мог найти, где разместить эти 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;

Ответы [ 2 ]

0 голосов
/ 04 июня 2019

Первое, что нужно понять, это как работают компоненты class based и functional. Кроме того, когда и где вы используете его.

Короче говоря, я могу сказать, что функциональные компоненты используются для представления статических данных. И на основе классов Используются для динамического источника данных.

Вот несколько ссылок для справки.

Компонент на основе класса и функциональные компоненты. В чем разница (Reactjs) и Функциональные компоненты реагирования и классические компоненты

Чтобы ответить на ваш конкретный вопрос. 

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.

Изучите разницу и переведите остальные

Этого достаточно для начала.

0 голосов
/ 04 июня 2019 
    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);
...