Javascript React JS/Material UI-从导入的组件调用方法

我试图从LoginModal.js调用handleLoginOpen方法，我在File1.js中导入了该方法。 File1实际上是一个嵌套在AppBar中的组件，在AppBar中我有一个帐户图标按钮，显示两个菜单项：Login或Register。如果我按login，我想用登录表单显示一个模式

以下是两个文件：

File1.js:

import React from "react";
import { IconButton, Menu, MenuItem } from "@material-ui/core";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
import LoginModal from "../components/LoginModal";

export default function AccountNotRegistered() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);

  const handleProfileMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleProfileMenuClose = () => {
    setAnchorEl(null);
  };

  const menuId = "account-menu";
  const renderMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={{ vertical: "top", horizontal: "right" }}
      id={menuId}
      keepMounted
      transformOrigin={{ vertical: "top", horizontal: "right" }}
      open={isMenuOpen}
      onClose={handleProfileMenuClose}
    >
      <MenuItem onClick={handleLoginOpen}>Login</MenuItem> <------------------- HERE I CALL THE METHOD
      <MenuItem onClick={handleProfileMenuClose}>Register</MenuItem>
    </Menu>
  );

  return (
    <div>
      <IconButton color="inherit" onClick={handleProfileMenuOpen}>
        <AccountCircleIcon />
      </IconButton>
      <LoginModal />
      {renderMenu}
    </div>
  );
}

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Modal from "@material-ui/core/Modal";
import { Backdrop } from "@material-ui/core";
import Fade from "@material-ui/core/Fade";

const useStyles = makeStyles((theme) => ({
  modal: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  paper: {
    backgroundColor: theme.palette.background.paper,
    border: "2px solid #000",
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3),
  },
}));

export default function LoginModal() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  const handleLoginOpen = () => { <----------------------------------HERE IS THE METHOD
    setOpen(true);
  };

  const handleLoginClose = () => {
    setOpen(false);
  };

  return (
    <Modal
      aria-labelledby="transition-modal-title"
      aria-describedby="transition-modal-description"
      className={classes.modal}
      open={open}
      onClose={handleLoginClose}
      closeAfterTransition
      BackdropComponent={Backdrop}
      BackdropProps={{
        timeout: 500,
      }}
    >
      <Fade in={open}>
        <div className={classes.paper}>
          <h2 id="transition-modal-title">Transition modal</h2>
          <p id="transition-modal-description">
            react-transition-group animates me.
          </p>
        </div>
      </Fade>
    </Modal>
  );
}

从“React”导入React；
从“@material ui/core”导入{IconButton，Menu，MenuItem}；
从“@material ui/icons/AccountCircle”导入AccountCircleIcon；
从“./components/LoginModal”导入LoginModal；
导出默认函数AccountNotRegistered（）{
常量[anchorEl，setAnchorEl]=React.useState（null）；
常量isMenuOpen=布尔值（Ancorel）；
const handleProfileMenuOpen=（事件）=>{
Setancorel（事件当前目标）；
};
const handleProfileMenuClose=（）=>{
setAnchorEl（空）；
};
const menuId=“帐户菜单”；
常数renderMenu=(
登录({
模态：{
显示：“flex”，
对齐项目：“中心”，
辩护内容：“中心”，
},
论文：{
背景色：theme.palete.background.paper，
边框：“2倍固体#000”，
boxShadow:theme.shadows[5]，
填充：主题。间距（2，4，3），
},
}));
导出默认函数LoginModal（）{
const classes=useStyles（）；
const[open，setOpen]=React.useState（false）；
const handleLoginOpen=（）=>{{
setOpen（假）；
};
返回(
过渡模态

反应过渡组动画我。

);
}

---

感谢您的帮助！

如果您想使用另一个组件的方法，您需要创建组件的父子关系，然后将这些方法作为道具传递给子组件

您应该在

File1.js中使用/call
，其中该
LoginModel
将获取模态可见性的prop值，如
isModalShown
，然后是关闭模态的函数，如
closeModal

因此，当您调用组件时，它看起来像：

<LoginModal isModalShown={isModalShown} closeModal={closeModal} />



您需要在File1.js中维护state变量，因为显示/隐藏模式是在同一个文件中完成的

import React from "react";
import { IconButton, Menu, MenuItem } from "@material-ui/core";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
import LoginModal from "../components/LoginModal";

export default function AccountNotRegistered() {
    const [anchorEl, setAnchorEl] = React.useState(null);
    const [isModalShown, toggleModal] = React.useState(false);

    const closeModal = () => toggleModal(false)

    const openModal = () => toggleModal(false)

    const isMenuOpen = Boolean(anchorEl);

    const handleProfileMenuOpen = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleProfileMenuClose = () => {
        setAnchorEl(null);
    };

    const menuId = "account-menu";
    const renderMenu = (
        <React.Fragment>
            <Menu
                anchorEl={anchorEl}
                anchorOrigin={{ vertical: "top", horizontal: "right" }}
                id={menuId}
                keepMounted
                transformOrigin={{ vertical: "top", horizontal: "right" }}
                open={isMenuOpen}
                onClose={handleProfileMenuClose}>
                    <MenuItem onClick={openModal}>Login</MenuItem>
                    <MenuItem onClick={handleProfileMenuClose}>Register</MenuItem>
            </Menu>
        </React.Fragment>
    );

    return (
        <div>
        <IconButton color="inherit" onClick={handleProfileMenuOpen}>
            <AccountCircleIcon />
        </IconButton>
        <LoginModal isModalShown={isModalShown} closeModal={closeModal} />
        {renderMenu}
        </div>
    );
}

从“React”导入React；
从“@material ui/core”导入{IconButton，Menu，MenuItem}；
从“@material ui/icons/AccountCircle”导入AccountCircleIcon；
从“./components/LoginModal”导入LoginModal；
导出默认函数AccountNotRegistered（）{
常量[anchorEl，setAnchorEl]=React.useState（null）；
常量[isModalShown，toggleModal]=React.useState（false）；
const closeModal=（）=>toggleModal（false）
常量openModal=（）=>toggleModal（false）
常量isMenuOpen=布尔值（Ancorel）；
const handleProfileMenuOpen=（事件）=>{
Setancorel（事件当前目标）；
};
const handleProfileMenuClose=（）=>{
setAnchorEl（空）；
};
const menuId=“帐户菜单”；
常数renderMenu=(
登录
登记
);
返回(
{renderMenu}
);
}

然后在LoginModal.js中

export default function LoginModal(props) {
  const classes = useStyles();

  return (
    <Modal
      aria-labelledby="transition-modal-title"
      aria-describedby="transition-modal-description"
      className={classes.modal}
      open={props.isModalShown}
      onClose={props.closeModal}
      closeAfterTransition
      BackdropComponent={Backdrop}
      BackdropProps={{
        timeout: 500,
      }}
    >
      <Fade in={open}>
        <div className={classes.paper}>
          <h2 id="transition-modal-title">Transition modal</h2>
          <p id="transition-modal-description">
            react-transition-group animates me.
          </p>
        </div>
      </Fade>
    </Modal>
  );
}

导出默认函数LoginModal（props）{
const classes=useStyles（）；
返回(
过渡模态

反应过渡组动画我。

);
}

我相信您也希望在单击Register时显示模式，您可以为这个
模式
组件创建一个包装器，然后将自定义道具传递给它，它将负责呈现
或