如何在 React Component 类中集成常量和函数？答案

【问题标题】：How to integrate constants and functions in React Component class?如何在 React Component 类中集成常量和函数？
【发布时间】：2019-11-28 04:06:49
【问题描述】：

让我们从 Material-UI 中获取 AppBar 代码： https://material-ui.com/components/app-bar/#app-bar-with-a-primary-search-field

有一个“renderMobileMenu”。我想整合它。问题是示例代码使用“函数”，而我的是一个 React 组件类。我需要有关如何在 React Component 类中集成该 renderMobileMenu（和相关）代码的指导。我也在使用 React Redux。

export default connect(
    mapStateToProps,
    {wbToggle: wbToggle, vidToggle: vidToggle, fileToggle: fileToggle}
)(Utilitybar);

我试过了，但总是出错，我违反了钩子法则。

【问题讨论】：

标签： reactjs react-redux material-ui react-component

【解决方案1】：

我假设您的班级名称是“Utilitybar”。由于您需要使用示例中的代码和功能，您可以通过两种方式实现它，

只需复制您需要的函数并将其与所需的依赖函数和包一起粘贴到类之外并调用它 - （不推荐的方法和肮脏的方式）
创建一个无状态组件（根据您的需要状态完整/无状态），您需要将其添加到现有类中，在新创建的无状态组件中导入所需的功能和包。完成后，您的无状态组件就可以使用了，然后继续导入您的 Utilitybar 并使用它。

参考下面的例子，

你需要创建一个单独的无状态组件

<path>/MobileMenu.js

/*import the dependency packages, files you are referring in your sample function*/
import React from 'react';
import { fade, makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar'; 
...
...
....

export const RenderMobileMenu = ({
}) => {
  /*copied the dependent functions to render - renderMobileMenu*/
  const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
  const [anchorEl, setAnchorEl] = React.useState(null);
  const isMenuOpen = Boolean(anchorEl);
  const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
  const mobileMenuId = 'primary-search-account-menu-mobile';
  
  function handleMobileMenuClose() {
    setMobileMoreAnchorEl(null);
  }
  
  function handleMenuClose() {
    setAnchorEl(null);
    handleMobileMenuClose();
  }
  
  /*copied the code under renderMobileMenu*/
  return (
    <Menu
      anchorEl={mobileMoreAnchorEl}
      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      id={mobileMenuId}
      keepMounted
      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      open={isMobileMenuOpen}
      onClose={handleMobileMenuClose}
    >
      <MenuItem>
        <IconButton aria-label="Show 4 new mails" color="inherit">
          <Badge badgeContent={4} color="secondary">
            <MailIcon />
          </Badge>
        </IconButton>
        <p>Messages</p>
      </MenuItem>
      <MenuItem>
        <IconButton aria-label="Show 11 new notifications" color="inherit">
          <Badge badgeContent={11} color="secondary">
            <NotificationsIcon />
          </Badge>
        </IconButton>
        <p>Notifications</p>
      </MenuItem>
      <MenuItem onClick={handleProfileMenuOpen}>
        <IconButton
          aria-label="Account of current user"
          aria-controls="primary-search-account-menu"
          aria-haspopup="true"
          color="inherit"
        >
          <AccountCircle />
        </IconButton>
        <p>Profile</p>
      </MenuItem>
    </Menu>
    )
}

现在 RenderMobileMenu 已准备好为 Utilitybar.js 服务。

直接在你的 Utilitybar.js 中导入这个 RenderMobileMenu.js 文件，然后在 render(return()) 方法下使用它。

编码愉快！！

【讨论】：

您的代码帮助了我的概念。我是 React JS 的初学者。这件特别的作品帮助我完成了项目的另一部分。谢谢！ :D

【解决方案2】：

您可以查看 v3 文档，了解它是如何以老式方式使用的。

https://v3.material-ui.com/demos/app-bar/#app-bar

【讨论】：

感谢您分享此内容。这正是我所需要的。