这是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. 「国庆训练」ArcSoft's Office Rearrangement(HDU-5933)

    题目与分析 题解见https://blog.csdn.net/cmershen/article/details/53200922. 训练赛场上我们写出来了--在4小时50分钟的时候...激情补题啊.. ...

  2. Java开发工程师(Web方向) - 01.Java Web开发入门 - 第4章.Maven

    第4章--Maven Maven实战 Java Web应用的部署: 手动式: 编译:javac -cp $CATALINA_HOME/lib/servlet-api.jar web-inf/class ...

  3. Spring Cloud(六):Hystrix 监控数据聚合 Turbine【Finchley 版】

    Spring Cloud(六):Hystrix 监控数据聚合 Turbine[Finchley 版]  发表于 2018-04-17 |  更新于 2018-05-07 |  上一篇我们介绍了使用 H ...

  4. python数据文件读写

    CSV格式读写 Comma-Separated Values 有时也称为字符分隔值,因为分隔字符也可以不是逗号.以,分隔的文件叫csv,以\t分隔的叫tsv 需要注意的一点:分隔符 import cs ...

  5. 【转载】OpenCV(C++ 与 Python 的比较)与 MATLAB 的比较

    原文作者 : Satya Mallick 译者 : aleen42 原文  https://aleen42.gitbooks.io/personalwiki/content/translation/o ...

  6. Python3 Tkinter-Toplevel

    1.创建 Toplevel与Frame类似,但是它包含窗体属性(如Title) from tkinter import * root=Tk() tl=Toplevel() Label(tl,text= ...

  7. Docker学习记录3: 搭建 Private Registry

    恩, Private Registry 特别好搭建, 只要依照官方文档, 很容易安装... https://docs.docker.com/registry/deploying/ 5000是个常用的端 ...

  8. Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题

    . 参考界面 : 携程app首页的广告栏, 使用ViewPager实现        自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...

  9. Alpha-1

    前言 失心疯病源1 团队代码管理github 站立会议 队名:PMS 530雨勤(组长) 今天完成了那些任务 10:00~13:00 OpenCV环境配置,Matlab工具包下载 15:40~17:1 ...

  10. Ubuntu使用时遇到的问题

    启动时显示System program problem detected 解决办法: 打开命令行窗口:Ctrl+Alt+T 执行命令:sudo gedit /etc/default/apport 把e ...