这是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的更多相关文章

  1. 七天接手react项目 —— 生命周期&受控和非受控组件&Dom 元素&Diffing 算法

    生命周期&受控和非受控组件&Dom 元素&Diffing 算法 生命周期 首先回忆一下 vue 中的生命周期: vue 对外提供了生命周期的钩子函数,允许我们在 vue 的各个 ...

  2. [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 ...

  3. 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 ...

  4. React文档(十六)refs和DOM

    Refs 提供了一种方式,用于访问在 render 方法中创建的 DOM 节点或 React 元素. 在标准的React数据流中,props是使得父组件和子组件之间交互的唯一方式.你通过props重新 ...

  5. React系列文章:无状态组件生成真实DOM结点

    在上一篇文章中,我们总结并模拟了JSX生成真实DOM结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({name ...

  6. react中如何获取onclick事件调用元素的dom对象

    今天终于有时间写博客了, 前几天项目有个需求,我感觉用dom操作兄弟元素实现比较方便,但是前端用的react框架不能用jquery的$(this)获取当前元素,查了好多资料和尝试后写下总结: 在HTM ...

  7. 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 ...

  8. react一些问题

    一.死循环 1.问题描述 function handleClick() { this.setState({count: ++this.state.count}); console.log(" ...

  9. button JS篇ant Design of react之二

    最近更新有点慢,更新慢的原因最近在看 <css世界>这本书,感觉很不错 <JavaScript高级程序设计> 这本书已经看了很多遍了,主要是复习前端的基础知识,基础知识经常会过 ...

随机推荐

  1. 「专题训练」Hard problem(Codeforces Round #367 Div. 2 C)

    题意与分析 题意:给出\(n\)个字符串,可以反转任意串,反转每个串都有其对应的花费\(c_i\).经过操作后是否能满足字符串\(\forall i \in [1,n] \text{且} i \in ...

  2. 通过批处理命令for提取数据

    前两天有这么个小需求: 在cmd中运行某测试工具后,会返回一个json结果,其中有一个参数的值每次都变且经常要用,正常情况复制粘贴就好了,但这个值非常长,配上cmd的标记+粘贴的行为,就很酸爽了.然后 ...

  3. selenium,unittest——自动化执行多个py文件脚本并生成报告

    将多个py文件的自动化脚本顺序运行,并生成报告,运行run_all_case后会自动运行文件内所有test开头的py文件并在指定文件夹report生成由脚本时间命名的报告 脚本执行后结果: 生成报告并 ...

  4. Jenkis 无法下载插件问题解决

    在新机器上安装jenkins后,安装插件报如下错误 sun.security.provider.certpath.SunCertPathBuilderException: unable to find ...

  5. 适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域

    此篇文章是对上一篇文章(http://www.ifiero.com/index.php/archives/611)的进一步补充,主要说明如何适配Apple的最新三款手机iPhoneXs.iPhoneX ...

  6. 【WXS数据类型】String

    属性: 名称 值类型 说明 [String].constructor [String] 返回值为“String”,表示类型的结构字符串 [String].length [Number] 返回该字符串的 ...

  7. 157. Unique Characters 【LintCode by java】

    Description Implement an algorithm to determine if a string has all unique characters. Example Given ...

  8. 名人问题 算法解析与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 ...

  9. Python3 Tkinter-Label

    1.创建 from tkinter import * root=Tk() root.title('Hello tkinter!') root.mainloop() 2.使用内置位图 from tkin ...

  10. 基础数据类型-tuple

    Python中,元组tuple与list类似,不同之处在于tuple的元素不能修改,tuple使用(),list使用[], (1)元组的创建使用(),需要注意的是创建包含一个元素的元组: tuple_ ...