Компонент пользовательского интерфейса материала является компонентом на основе функций?

Question

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

Answer 1

Нетрудно интегрировать компоненты на основе классов. да, в пользовательском интерфейсе Material c все интегрировано в функционально-ориентированные компоненты с использованием хуков. Но вы должны иметь некоторые знания о хуках и концепциях состояний, чтобы их можно было легко интегрировать. например:

  export default function AlertDialog() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open alert dialog
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            Let Google help apps determine location. This means sending anonymous location 
         data to
            Google, even when no apps are running.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Disagree
          </Button>
          <Button onClick={handleClose} color="primary" autoFocus>
            Agree
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

Итак, этот код диалога записан в функциональных компонентах на основе, но мы можем легко интегрироваться в компонент на основе классов. Например:

 export default  class  AlertDialog extends React.Components{
  constructor(){

 super(props)
this.state={
    open:false
    }
  }


  handleClickOpen = () => {
    this.setState({open:true})
  };

  handleClose = () => {
       this.setState({open:false})
  };
render(){
  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open alert dialog
      </Button>
      <Dialog
        open={this.state.open}
        onClose={this.handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            Let Google help apps determine location. This means sending anonymous location 
         data to
            Google, even when no apps are running.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={this.handleClose} color="primary">
            Disagree
          </Button>
          <Button onClick={this.handleClose} color="primary" autoFocus>
            Agree
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}
}

Итак, у нас должны быть знания. о базовых c Реагировать концепции, и вы можете сделать это.