如何在類中編寫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 。