Question

注意：我正在使用material-ui 3.3.0

我正在寻找在页面上创建两个<Drawer>组件。第一个从左边出现，另一个从右边出现。两个<Button>组件位于<AppBar>中，分别用于切换每个抽屉。

这一切都很好，但是当rightDrawer打开并且单击leftDrawer的按钮（设置leftOpen:true和rightOpen:false）时，出现以下错误：< / p>

Uncaught TypeError: Cannot read property 'removeAttribute' of null
  at ariaHidden (manageAriaHidden.js:28)
  at ModalManager.remove (ModalManager.js:188)
  at Modal._this.handleClose (Modal.js:145)
  at Modal.componentDidUpdate (Modal.js:221)
  at commitLifeCycles (react-dom.development.js:14369)
  at commitAllLifeCycles (react-dom.development.js:15462)
  at HTMLUnknownElement.callCallback (react-dom.development.js:100)
  at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
  at invokeGuardedCallback (react-dom.development.js:187)
  at commitRoot (react-dom.development.js:15603)
  at completeRoot (react-dom.development.js:16618)
  at performWorkOnRoot (react-dom.development.js:16563)
  at performWork (react-dom.development.js:16482)
  at performSyncWork (react-dom.development.js:16454)
  at interactiveUpdates$1 (react-dom.development.js:16719)
  at interactiveUpdates (react-dom.development.js:2150)
  at dispatchInteractiveEvent (react-dom.development.js:4532)

不同寻常的是，相反情况似乎并非如此。

以下是演示我的问题的基本代码段：

class Test extends React.Component
{
  constructor(props)
  {
    super(props);

    this.state = {
      leftOpen: false,
      rightOpen: false
    }

    this.toggleLeftPanel = () => {
      this.setState({
        leftOpen: !this.state.leftOpen, 
        rightOpen: false
      });
    }

    this.toggleRightPanel = () => {
      this.setState({
        rightOpen: !this.state.rightOpen,
        leftOpen: false
      });
    }
  }

  render()
  {
    return (
      <React.Fragment>
        {this.AppBar}
        {this.getDrawer(this.state.leftOpen, 'left')}
        {this.getDrawer(this.state.rightOpen, 'right')}
      </React.Fragment>
    )
  }

  get AppBar()
  {
    return (
      <AppBar position='relative' color='primary' style={{height: 64, zIndex: 9999}}>
        <Toolbar>
          {this.getButton(this.state.leftOpen ? 'flat' : 'raised', this.toggleLeftPanel)}
          <div style={{flexGrow: 1}}/>
          {this.getButton(this.state.rightOpen ? 'flat' : 'raised', this.toggleRightPanel)}
        </Toolbar>
      </AppBar>
    );
  }

  getButton(variant, onClick)
  {
    return (
      <Button variant={variant} onClick={onClick}>
        {"open"}
      </Button>
    )
  }

  getDrawer(isOpen, anchor)
  {
    return (
      <Drawer open={isOpen} anchor={anchor}>
        <div style={{width: 100}}/>
      </Drawer>
    );
  }
}

我尝试设置一个延迟（通过setTimeout）到“切换”打开一个面板，然后关闭另一个切换，以查看是否绕过该问题..但无济于事。

Answer 1

这似乎是版本3.3.0上的当前问题，解决方案似乎是回滚到@ material-ui / core @ 3.2.2并锁定package.json的版本

npm install @material-ui/core@3.2.2

编辑：似乎已在3.3.2升级中修复，您应该没问题！

Material-UI：在两个抽屉组件之间进行交换时出现未捕获的TypeError

1 个答案: