如何在类中编写handleClick而不是在react js中导出默认函数

Question

我是新的反应，我想在我的项目中使用材质 UI，我像这样阅读了菜单部分的文档，但我无法编写代码，我的问题是如何将export default function转换为class PageHeader extends React.Component{}为这部分class PageHeader extends React.Component{}

    const ITEM_HEIGHT = 100;
    const [anchorEl, setAnchorEl] = React.useState(null);
    const open = Boolean(anchorEl);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };

Answer 1

您链接的示例使用了函数组件。 我们可以将这些转换为您想要的更传统的类组件，或者您可以将函数用作组件 - 该示例能够使用<LongMenu />因为它是一个组件，只是使用函数而不是类声明。 React 文档中有关于将函数组件转换为类的信息。

使用类而不是函数时的一些关键点是像useState和useEffect这样的钩子useEffect并不存在于类中。 相反，我们将状态存储为类中的一个字段，并使用生命周期方法。 您提供的代码段的类可能如下所示：

class PageHeader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      anchorEl: null
    };
  }

  handleClick = event => {
    this.setState({ anchorEl: event.currentTarget });
  }

  handleClose = () => {
    this.setState({ anchorEl: null });
  }

  render() {
    return (...);
  }
}

export default PageHeader;

而不是使用的useState挂钩，我们可以存储的状态anchorEl在this.state ，并与更新this.setState 。