reactjs - "Cannot read property ' offsetWidth ' of null"使用 Material UI 对话框时

Question

当我用 Material UI“Dialog”包装“form”元素时，出现“无法读取 null 的属性‘offsetWidth’”错误，这使得 InputLabel 的自动宽度无法工作。

当我删除 Dialog 时，它工作得很好并且在 ComponentDidmount 上正确读取了 InputLabelRef。

沙箱示例:https://codesandbox.io/s/1q98z07w13

我需要用 Dialog 包裹它。这可能是什么问题？

Answer 1

发生这种情况的原因是，当调用 componentDidMount 时，对话框内的组件不会呈现，即使您的默认状态是 open === true .

这里的技巧是确保在调用 componentDidMount 时始终挂载您的表单。为此，您需要将表单拆分成一个完全独立的组件，该组件位于 Dialog 组件内。这样，componentDidMount 会在 Dialog 显示您的单独组件时调用，而不是在 Dialog 本身呈现时调用。

我已经更新了您的沙盒以包含我提到的更改:https://codesandbox.io/s/zw705046w3