React 类如何 AnchorEl Popover答案

【问题标题】：React Class how to AnchorEl PopoverReact 类如何 AnchorEl Popover
【发布时间】：2020-09-12 12:23:34
【问题描述】：

您好，我是 React 和像 useState 这样的 Hooks 的新手。我很难掌握这个概念以及如何使用它。所以我不想制作比我更复杂的片段和文件。

我在将 React.component 从函数切换到类时遇到了问题，Popover。

我已经分叉了CodeSandbox 来尝试展示我也想切换的内容。但是，我只是无法很好地理解文档以实现它。

要让 React.Class.Component 使用 React-States 需要做什么？

【问题讨论】：

标签： javascript reactjs react-hooks popover use-state

【解决方案1】：

    import React, { Component } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Popover from "@material-ui/core/Popover";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";

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

export default class SimplePopover extends Component {
  constructor(props) {
    super(props);
    // const classes = useStyles();
    // const [anchorEl, setAnchorEl] = React.useState(null);
    this.state = {
      anchorEl: null,
      open: false,
      id: undefined
    }
    this.handleClick = this.handleClick.bind(this);
    this.handleClose = this.handleClose.bind(this);

    // const open = Boolean(anchorEl);
    // const id = open ? "simple-popover" : undefined;
  }

  handleClick(event) {
    this.setState({anchorEl: event.currentTarget, open: Boolean(event.currentTarget), id: "simple-popover"});
  }

  handleClose(event) {
    this.setState({anchorEl: event.currentTarget, open: false, id: undefined});
  }

  render() {
    return (
      <div>
        <Button
          aria-describedby={this.id}
          variant="contained"
          color="primary"
          onClick={this.handleClick}
        >
          Open Popover
        </Button>
        <Popover
          id={this.id}
          open={this.state.open}
          anchorEl={this.state.anchorEl}
          onClose={this.handleClose}
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "center"
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "center"
          }}
        >
          {/* <Typography className={this.classes.typography}> */}
          <div>The content of the Popover.</div>
          {/* </Typography> */}
        </Popover>
      </div>
    );
  }
}

错误

const [anchorEl, setAnchorEl] = React.useState(null);

你不能在类组件中使用 Hook

【讨论】：

所以我必须创建一个 React.component 函数才能与 React-Hooks 一起使用？没有“在 React.Class.Function 中使用 React-Hooks”？
你不能在类组件中使用“React-Hooks”，你只能在功能组件中使用它们。类组件是那些具有类的组件，而功能是仅具有功能的组件
谢谢 L.O.这似乎很痛苦 - 为单个类组件制作一个功能组件，但没关系。