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

Question

我是 React 的新手，我想在我的项目中使用材质 UI，我像这样阅读了菜单部分的文档，但我无法编写代码，我的问题是如何将这部分转换export default function为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相反，我们将状态存储为类中的一个字段，并使用生命周期方法。您提供的代码段的类可能如下所示：

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;

我们可以存储inuseState的状态，并使用 更新它，而不是使用钩子。anchorElthis.statethis.setState