“无法读取null的属性'offsetWidth'"使用材质UI对话框时 [英] "Cannot read property 'offsetWidth' of null" when using Material UI Dialog

问题描述

当我用材质UI对话框"包装表单"元素时，出现无法读取null的属性'offsetWidth'"错误，这使InputLabel的自动宽度无法工作.

The moment i wrap "form" element with Material UI "Dialog", I get an "Cannot read property 'offsetWidth' of null" error, which makes it impossible for automatic width of InputLabel to work.

当我删除Dialog时，它可以正常工作，并且可以在ComponentDidmount上正确读取InputLabelRef.

When i remove Dialog it works just fine and InputLabelRef is properly read on ComponentDidmount.

带有示例的沙盒: https://codesandbox.io/s/1q98z07w13

我需要将其与Dialog一起包装.这里可能是什么问题?

I need it to be wrapped with Dialog. What might be the issue here?

推荐答案

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

The reason that this is occurring is because the components inside of your dialog are not rendered when componentDidMount is called, even if your default state is open === true.

此处的技巧是确保在调用componentDidMount时始终挂载表单.为此，您需要将表单分成一个单独的组件，该组件位于您的Dialog组件内部.当Dialog显示单独的组件时，而不是在Dialog本身已呈现时，将调用这种方式componentDidMount.

The trick here is to make sure that your form will always be mounted when componentDidMount is called. To do this you need to split your form out into a seperate component altogether that sits inside of your Dialog component. This way componentDidMount is called when the Dialog displays your seperate component and not when the Dialog itself has rendered.

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

I've updated your sandbox to include the changes I've mentioned: https://codesandbox.io/s/zw705046w3

这篇关于“无法读取null的属性'offsetWidth'"使用材质UI对话框时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！