warning: React does not recognize the xxx prop on a DOM element
这是React不能识别dom元素上的非标准attribute报出的警告,最终的渲染结果中React会移除这些非标准的attribute。
通常{...this.props}和cloneElement(element, this.props)这两种写法,会将父级别无用的attribute传递到子级的dom元素上。
例如:
function MyDiv(props) {
if (props.layout === 'horizontal') {
// BAD! Because you know for sure "layout" is not a prop that <div> understands.
return <div {...props} style={getHorizontalStyle()} />
} else {
// BAD! Because you know for sure "layout" is not a prop that <div> understands.
return <div {...props} style={getVerticalStyle()} />
}
}
可以使用rest参数接收,删除等方法来解决:
const { layout, ...rest } = props
//或者
const divProps = Object.assign({}, props);
delete divProps.layout;
具体可参考:React官方文档 Unknown Prop Warning
warning: React does not recognize the xxx prop on a DOM element的更多相关文章
- 七天接手react项目 —— 生命周期&受控和非受控组件&Dom 元素&Diffing 算法
生命周期&受控和非受控组件&Dom 元素&Diffing 算法 生命周期 首先回忆一下 vue 中的生命周期: vue 对外提供了生命周期的钩子函数,允许我们在 vue 的各个 ...
- [React] Integration test a React component that consumes a Render Prop
In this lesson, I use Enzyme and Jest's Snapshot functionality to write an integration test for a co ...
- MySQL [Warning] Can’t create test file xxx lower-test(转)
add by zhj:修改的数据库的datadir,然后数据库就无法启动了,错误如下 2014-12-11 16:22:57 26309 [Warning] Can't create test fil ...
- React文档(十六)refs和DOM
Refs 提供了一种方式,用于访问在 render 方法中创建的 DOM 节点或 React 元素. 在标准的React数据流中,props是使得父组件和子组件之间交互的唯一方式.你通过props重新 ...
- React系列文章:无状态组件生成真实DOM结点
在上一篇文章中,我们总结并模拟了JSX生成真实DOM结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({name ...
- react中如何获取onclick事件调用元素的dom对象
今天终于有时间写博客了, 前几天项目有个需求,我感觉用dom操作兄弟元素实现比较方便,但是前端用的react框架不能用jquery的$(this)获取当前元素,查了好多资料和尝试后写下总结: 在HTM ...
- react fake double , bind click and dblclick on the same element
smartClick:function(id,name,waiter,e){ var desk = $$(e.currentTarget).data('raw'); if(this.lastClick ...
- react一些问题
一.死循环 1.问题描述 function handleClick() { this.setState({count: ++this.state.count}); console.log(" ...
- button JS篇ant Design of react之二
最近更新有点慢,更新慢的原因最近在看 <css世界>这本书,感觉很不错 <JavaScript高级程序设计> 这本书已经看了很多遍了,主要是复习前端的基础知识,基础知识经常会过 ...
随机推荐
- Python字符串操作大全(非常全!!!)
1. python编程里字符串的内置方法(非常全) capitalize() 把字符串的第一个字符改为大写 casefold() 把整个字符串的所有字符改为小写 center(width) 将字符串居 ...
- Unity - Humanoid设置Bip骨骼导入报错
报错如下: 解决: 原因是biped骨骼必须按照Unity humanoid的要求设置,在max中设置如下:
- TW实习日记:第18天
今天的bug没有那么多了,都是些小bug,一下就改好了.或者是接口那边数据返回的有问题,通知一下同事就ok了.主要今天是在赶功能进度,然而有一个功能模块需求里并没有写,实在是不知道要做成什么样子,真的 ...
- iis 10 重新注册iis
iis 10 使用该命令 提示 版本不支持 C:\WINDOWS\system32>c:\windows\microsoft.net\framework64\v4.0.30319\aspnet_ ...
- Special Offer! Super Price 999 Bourles!
Description Polycarpus is an amateur businessman. Recently he was surprised to find out that the mar ...
- 域名加www与不加www不一样结果的解决办法
有些浏览器域名访问加www 与不加www出现的页面不一样.在aj请求的时候也不同.firefox与google新版本的都会自动加上www. 比如 访问haitaohua.com,但aj请求的时候是带w ...
- java—连连看GUI
1.连连看棋盘图形化 package Link; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; impo ...
- 【IdentityServer4文档】- 欢迎来到 IdentityServer4
欢迎来到 IdentityServer4 IdentityServer4 是一款包含和实现了 OpenID Connect 和 OAuth 2.0 协议的,适用于 ASP.NET Core 的框架 . ...
- 如何:调试 .NET Framework 源代码
文章标题:如何:调试 .NET Framework 源代码 文章地址:https://technet.microsoft.com/zh-cn/cc667410.aspx
- Java容器之Collections
Collections 类来源于 java.util.Collections,从 java.lang.object继承. 此类完全由在 collection 上进行操作或返回 collection 的 ...