如何在类中编写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 {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; anchorEl: null&nbsp; &nbsp; };&nbsp; }&nbsp; handleClick = event => {&nbsp; &nbsp; this.setState({ anchorEl: event.currentTarget });&nbsp; }&nbsp; handleClose = () => {&nbsp; &nbsp; this.setState({ anchorEl: null });&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (...);&nbsp; }}export default PageHeader;我们可以存储inuseState的状态，并使用 更新它，而不是使用钩子。anchorElthis.statethis.setState