Question

Next.js的新手寻求您的支持，以解释如何为组件的属性传递新值。我使用Material-UI库进行样式设置。

当试图更改抽屉组件的打开属性时，它总是对我显示[TypeError] open是只读的。

const drawer = (
  <SwipeableDrawer open={drawerOpened}>
    <div tabIndex={0} role="button">
      {sideList}
    </div>
  </SwipeableDrawer>
);

const handleClick = e => {
  drawerOpened = !drawerOpened;
  drawer.props.open = drawerOpened;
  e.preventDefault();
};

const Index = () => (
  <div className={styles.root}>
    <AppBar position="static">
      <Toolbar>
        <IconButton
          className={styles.menuButton}
          color="inherit"
          aria-label="Menu"
          onClick={handleClick}
        >
          <MenuIcon />
        </IconButton>
        <Typography variant="h6" color="inherit" className={styles.grow}>
          Example
        </Typography>
        <Button color="inherit" style={{ right: "0px", position: "absolute" }}>
          Login
        </Button>
      </Toolbar>
    </AppBar>
    {drawer}
  </div>
);

Answer 1

我不确定您在哪里声明了drawerOpened变量。无论哪种方式，一旦交换了drawerOpened的值，drawer的属性就会改变，并且无需篡改drawer.props.open：

const handleClick = e => {
  e.preventDefault();
  drawerOpened = !drawerOpened;
};

需要指出的另一件事是，理想情况下，Index应该是具有state的React类（不是功能组件）。 drawerOpen将存储在state中，并作为道具传递给drawer。 {{1}中的handleClick中的setState：

drawerOpened

编辑组件属性onClick Next.js

1 个答案: