Question

我最近与一个朋友一起开始了一个项目，现在我正尝试将弹出框的单击功能从弹出框组件传递到其他位置的按钮组件。我知道我想将函数作为道具传递并在按钮组件中使用，但是由于我是新手，所以我很难做到这一点，而且我在执行每个步骤时都会遇到新的错误。

function rand() {
  return Math.round(Math.random() * 20) - 10;
}

function getModalStyle() {
  const top = 50 + rand();
  const left = 50 + rand();

  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`
  };
}

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    paper: {
      position: "absolute",
      width: 400
    }
  })
);

const SimpleModal = () => {
  const classes = useStyles();
  // getModalStyle is not a pure function, we roll the style only on the first render
  const [modalStyle] = React.useState(getModalStyle);
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

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

  return (
    <div>
      <button type="button" onClick={handleOpen}>
        a
      </button>
      <Modal
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
        open={open}
        onClose={handleClose}
      >
        <div style={modalStyle} className={classes.paper}>
          <Popover />
        </div>
      </Modal>
    </div>
  );
};

通过功能作为反应道具

0 个答案: