功能组件到 class 组件

Question

嗨，我想在我的项目中使用对话框......但是我得到了带有功能组件的对话框......任何人都可以转换成基于 class 的组件并给我答案......此代码已从材料中获取ui ....我不太熟悉功能组件......任何人都可以帮助这些......请

import React from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';

export default function ScrollDialog() {
  const [open, setOpen] = React.useState(false);
  const [scroll, setScroll] = React.useState('paper');

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

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

  const descriptionElementRef = React.useRef(null);
  React.useEffect(() => {
    if (open) {
      const { current: descriptionElement } = descriptionElementRef;
      if (descriptionElement !== null) {
        descriptionElement.focus();
      }
    }
  }, [open]);

  return (
    <div>
      <Button onClick={handleClickOpen('paper')}>scroll=paper</Button>
      <Button onClick={handleClickOpen('body')}>scroll=body</Button>
      <Dialog
        open={open}
        onClose={handleClose}
        scroll={scroll}
        aria-labelledby="scroll-dialog-title"
        aria-describedby="scroll-dialog-description"
      >
        <DialogTitle id="scroll-dialog-title">Subscribe</DialogTitle>
        <DialogContent dividers={scroll === 'paper'}>
          <DialogContentText
            id="scroll-dialog-description"
            ref={descriptionElementRef}
            tabIndex={-1}
          >
            {[...new Array(50)]
              .map(
                () => `Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
              )
              .join('\n')}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleClose} color="primary">
            Subscribe
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

Answer 1

你应该能够使用一个功能组件，而不管它们是如何工作的，但是如果你了解反应状态/道具/生命周期，转换功能组件是相当微不足道的。

基本步骤：

1. 将所有 state 挂钩转换为单个 state object 并更新所有 state 更新函数，现在将 this.setState 与要合并的正确this.setState一起使用。
2. 将效果挂钩转换为适当的生命周期 function（通常是componentDidMount 、 componentDidUpdate和/或componentWillUnmount 。
3. 将 ref 钩子转换为常规 react.createRef`。
4. 将所有回调函数和实用函数转换为实例函数（删除const ）。
5. 将之前的返回移至render生命周期 function
6. 更新所有状态/prop、回调和实用函数以正确访问组件的this ，用于 function 调用或状态/prop 访问。

基于类的组件

import React, { Component, createRef } from "react";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";

export default class ScrollDialog extends Component {
  state = {
    open: false,
    scroll: "paper"
  };

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

  handleClose = () => {
    this.setState({ open: false });
  };

  descriptionElementRef = createRef();

  componentDidUpdate(prevProps, prevState) {
    if (this.state.open) {
      const { current: descriptionElement } = this.descriptionElementRef;
      if (descriptionElement !== null) {
        descriptionElement.focus();
      }
    }
  }

  render() {
    const { open, scroll } = this.state;
    return (
      <div>
        <Button onClick={this.handleClickOpen("paper")}>scroll=paper</Button>
        <Button onClick={this.handleClickOpen("body")}>scroll=body</Button>
        <Dialog
          open={open}
          onClose={this.handleClose}
          scroll={scroll}
          aria-labelledby="scroll-dialog-title"
          aria-describedby="scroll-dialog-description"
        >
          <DialogTitle id="scroll-dialog-title">Subscribe</DialogTitle>
          <DialogContent dividers={scroll === "paper"}>
            <DialogContentText
              id="scroll-dialog-description"
              ref={this.descriptionElementRef}
              tabIndex={-1}
            >
              {[...new Array(50)]
                .map(
                  () => `Cras mattis consectetur purus sit amet fermentum.
  Cras justo odio, dapibus ac facilisis in, egestas eget quam.
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`
                )
                .join("\n")}
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleClose} color="primary">
              Cancel
            </Button>
            <Button onClick={this.handleClose} color="primary">
              Subscribe
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}