Javascript 编辑组件属性onClick Next.js

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

当我试图更改抽屉组件的open属性时，它始终为我显示[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>
);

const抽屉=(
{侧列表}
);
常量handleClick=e=>{
抽屉套索=！抽屉套索；
drawer.props.open=用绳子拉着的抽屉；
e、 预防默认值（）；
};
常数索引=（）=>(
实例
登录
{抽屉}
);

我不确定您在哪里声明了

drawerropened

变量。 无论哪种方式，一旦您交换了

drawerropened

的值，

drawer

的道具已更改，无需篡改

drawer.props.open

：

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

需要指出的另一点是，理想情况下，

索引

应该是一个React类（而不是一个功能组件），它具有

状态

drawerropen

将存储在

状态

中，并作为道具传递给

drawer

<代码>把手点击将

设置状态

的

抽屉套住

：

class Index extends React.Component {
  state = {drawerOpened: false}

  handleClick = e => {
    e.preventDefault();
    this.setState(prevState => ({
      drawerOpened: !prevState.drawerOpened
    }))
  };

  render() {
    return <div className={styles.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            className={styles.menuButton}
            color="inherit"
            aria-label="Menu"
            onClick={this.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>
      <SwipeableDrawer open={this.state.drawerOpened}>
        <div tabIndex={0} role="button">
          {sideList}
        </div>
      </SwipeableDrawer>
    </div>
  }
}

类索引扩展了React.Component{
状态={drawerropened:false}
handleClick=e=>{
e、 预防默认值（）；
this.setState（prevState=>({
DropeRoped:！prevState.DropeRoped
}))
};
render（）{
回来
实例
登录
{侧列表}
}
}