Material UI DataGrid出现focusElementRef警告的原因排查
React DataGrid操作列触发focusElementRef警告的原因
- 内部属性误传递到DOM元素:Material UI的DataGrid会给列渲染组件传递一些内部管理用的属性,
focusElementRef就是其中之一,用于控制单元格焦点状态。当你在操作列的renderCell里直接返回原生DOM元素(比如<button>)时,这个内部属性会被附加到DOM节点上,而React会严格校验DOM元素的属性,非标准属性就会触发警告。 - 自定义组件未过滤多余属性:如果操作列用了自定义组件,且组件没有过滤掉DataGrid传入的非预期属性,这些属性会被透传到最终渲染的DOM元素上。比如你写的编辑按钮组件如果直接把所有props传给
<button>,就会带上focusElementRef这类不属于按钮的属性。 - 操作列的渲染逻辑差异:普通数据列的渲染会由DataGrid内部处理,自动过滤掉内部属性;但操作列是自定义渲染逻辑,DataGrid不会自动做属性过滤,导致内部属性泄露到DOM元素上。
内容的提问来源于stack exchange,提问作者Simon Price
相关产品推荐
相关产品推荐

