Question

嗨，我想在我的项目中使用对话框...但是我得到了带有功能组件的对话框...可以将任何一个转换成基于类的组件并给我答案吗... 这段代码是从材料ui上获取的。...我对功能组件并不熟悉... 有人可以帮忙吗...请

from keras.backend import tf as ktf

inp = Input(shape=(None, None, 3))

Answer 1

您应该能够使用功能组件，而不用真正了解它们的工作原理，但是如果您了解反应状态/属性/生命周期，则转换功能组件将变得非常简单。

基本步骤：

将所有状态挂钩转换为单个状态对象，并更新所有状态更新功能，以现在使用this.setState并合并正确的状态。
将效果挂钩转换为适当的生命周期功能（通常为componentDidMount，componentDidUpdate和/或componentWillUnmount。
将引用挂钩转换为常规react.createRef`。
将所有回调和实用程序函数转换为实例函数（删除const）。
将先前的返回结果移至render生命周期函数中
更新所有状态/属性以及回调和实用程序功能以正确访问组件的this，以进行函数调用或状态/属性访问。

基于类的组件

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>
    );
  }
}

功能组件到类组件

1 个答案: