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高级程序设计> 这本书已经看了很多遍了,主要是复习前端的基础知识,基础知识经常会过 ...
随机推荐
- 「专题训练」Hard problem(Codeforces Round #367 Div. 2 C)
题意与分析 题意:给出\(n\)个字符串,可以反转任意串,反转每个串都有其对应的花费\(c_i\).经过操作后是否能满足字符串\(\forall i \in [1,n] \text{且} i \in ...
- 通过批处理命令for提取数据
前两天有这么个小需求: 在cmd中运行某测试工具后,会返回一个json结果,其中有一个参数的值每次都变且经常要用,正常情况复制粘贴就好了,但这个值非常长,配上cmd的标记+粘贴的行为,就很酸爽了.然后 ...
- selenium,unittest——自动化执行多个py文件脚本并生成报告
将多个py文件的自动化脚本顺序运行,并生成报告,运行run_all_case后会自动运行文件内所有test开头的py文件并在指定文件夹report生成由脚本时间命名的报告 脚本执行后结果: 生成报告并 ...
- Jenkis 无法下载插件问题解决
在新机器上安装jenkins后,安装插件报如下错误 sun.security.provider.certpath.SunCertPathBuilderException: unable to find ...
- 适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域
此篇文章是对上一篇文章(http://www.ifiero.com/index.php/archives/611)的进一步补充,主要说明如何适配Apple的最新三款手机iPhoneXs.iPhoneX ...
- 【WXS数据类型】String
属性: 名称 值类型 说明 [String].constructor [String] 返回值为“String”,表示类型的结构字符串 [String].length [Number] 返回该字符串的 ...
- 157. Unique Characters 【LintCode by java】
Description Implement an algorithm to determine if a string has all unique characters. Example Given ...
- 名人问题 算法解析与Python 实现 O(n) 复杂度 (以Leetcode 277. Find the Celebrity为例)
1. 题目描述 Problem Description Leetcode 277. Find the Celebrity Suppose you are at a party with n peopl ...
- Python3 Tkinter-Label
1.创建 from tkinter import * root=Tk() root.title('Hello tkinter!') root.mainloop() 2.使用内置位图 from tkin ...
- 基础数据类型-tuple
Python中,元组tuple与list类似,不同之处在于tuple的元素不能修改,tuple使用(),list使用[], (1)元组的创建使用(),需要注意的是创建包含一个元素的元组: tuple_ ...