如何修复React控制台中的‘React无法识别DOM元素上的showLabel prop’警告

控制台日志中显示以下警告信息：

Warning: React无法识别DOM元素上的showLabel prop。如果您有意让它作为自定义属性出现在DOM中，请改为全小写拼写showlabel。如果您是从父组件意外传递了该prop，请从DOM元素上移除它。

两种场景对应的解决方法： #

场景1：需将该属性作为自定义DOM属性保留 #

如果确实需要在DOM元素上添加这个自定义属性，按照React规则，把驼峰式的showLabel改为全小写的showlabel即可，React会正常识别并渲染该属性，不再抛出警告。

示例代码：

// 修改前
<div showLabel={true}>示例内容</div>

// 修改后
<div showlabel={true}>示例内容</div>

场景2：该prop属于意外传递给DOM元素 #

如果showLabel是给自定义组件使用的参数，却误传到了原生DOM元素（如div、span等）上，可通过解构赋值分离prop，避免不必要的属性传递。

示例代码：

// 父组件传递属性
function Parent() {
  return <CustomComponent showLabel={true} className="container" />;
}

// 自定义组件中分离属性
function CustomComponent({ showLabel, ...domProps }) {
  // 此处可使用showLabel做业务逻辑处理
  return <div {...domProps}>自定义组件内容</div>;
}

通过上述方式，showLabel会被留在自定义组件内部使用，不会被传递到内部的div元素上，警告即可消除。

内容的提问来源于stack exchange，提问作者Shashimal Kawinda Wanninayake