使用Elastic UI Modal时，React提示gapMode属性不被DOM元素识别怎么办？

可能的原因 #

• Elastic UI（EUI）组件内部的版本兼容性问题：部分EUI版本存在将gapMode属性误传递给DOM元素的bug，或是当前EUI版本与你的React版本不兼容。
• 自定义组件的props透传问题：如果在Modal内部嵌套了自定义组件，可能通过...rest语法将父组件的所有props（包括意外的gapMode）传递给了底层DOM元素。
• 间接传递了gapMode：可能在父组件或上层组件中，通过状态管理或其他逻辑间接将gapMode传递给了EUI Modal或其子组件，并非你显式编写的代码导致。

解决方案 #

1. 检查并调整EUI版本
   核对EUI官方文档的版本兼容性说明，确认当前EUI版本与React版本匹配。若为EUI自身bug，尝试升级到最新稳定版或降级到无此问题的版本：

   npm install @elastic/eui@latest
   # 或指定已知兼容版本
   npm install @elastic/eui@8.10.0
   

2. 过滤自定义组件的无关props
   如果你在Modal内部使用了自定义组件，通过解构赋值过滤掉gapMode后再传递给DOM元素：

   const CustomModalContent = (props) => {
     const { gapMode, ...restProps } = props;
     return <div {...restProps}>自定义内容</div>;
   };
   

3. 排查props传递链路
   使用React DevTools查看Modal组件的props列表，确认是否存在gapMode，顺着组件树向上追溯找到属性的传递来源，修正对应的代码逻辑。

4. 严格遵循EUI Modal使用规范
   按照EUI文档的标准结构使用Modal，正确嵌套EuiModalHeader、EuiModalBody、EuiModalFooter等子组件，避免因错误嵌套引发的props传递异常。

内容的提问来源于stack exchange，提问作者nix86