编辑组件属性 onClick Next.js

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 的 prop 就改变了，并且不需要篡改 drawer.props.open:

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

另外需要指出的是，理想情况下 Index 应该是具有 state 的 React Class（不是功能组件）。 drawerOpen 将存储在 state 中并作为道具传递给 drawer。 handleClick 会 setState of drawerOpened:

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>
  }
}

编辑组件属性 onClick Next.js

Edit component property onClick Next.js

javascript

material-ui

next.js

编辑组件 属性 onClick Next.js

Edit component property onClick Next.js

javascript

material-ui

next.js

编辑组件属性 onClick Next.js