这是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. unity发布自定义分辨率

    如果你需要发布unity时想要使用自己设置的分辨率仅需要一下几个步骤: 打开Build Setting->PlayerSetting->Resolution and Presentatio ...

  2. 常用实例:js格式化手机号为3 4 4形式

    如何在填写手机号时将格式转换为3 4 4形式: 一:填写手机号时,在keyup事件中判断长度,符合条件时在值后面插入空格 $('#username').on('keyup',function(e){ ...

  3. Thunder团队——事后诸葛亮会议

    小组名称:Thunder 项目名称:爱阅APP 小组成员:王航 李传康 代秋彤 邹双黛 苗威 宋雨 胡佑蓉 杨梓瑞 一.设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型 ...

  4. 第二十一次ScrumMeeting会议

    第二十一次Scrum Meeting 时间:2017/12/11 地点:SPR咖啡馆 人员:王子铭 游心 解小锐 王辰昱 李金奇 杨森 陈鑫 赵晓宇 照片: 目前工作进展 名字 今日 明天的工作 蔡帜 ...

  5. sql 至少含有

    查询Score表中至少有5名学生选修的并以3开头的课程的平均分数: select avg(degree),cnofrom scorewhere cno like '3%'group by cnohav ...

  6. C++视频教学

    http://open.163.com/movie/2010/1/E/4/M6LDTAPTU_M6LFSTGE4.html http://open.163.com/movie/2010/1/N/5/M ...

  7. eg_3

    3. 编写一个程序,返回一个 double 类型的二维数组,数组中的元素通过解析字符串参数获得,如字符串参数:“1,2;3,4,5;6,7,8”,则对应的数组为: d[0][0]=1.0, d[0][ ...

  8. python学习笔记07:自定义类型

    class person: def __init__(self,name,age,weight): self.name = name self.age = age self.weight = weig ...

  9. lintcode-196-寻找缺失的数

    196-寻找缺失的数 给出一个包含 0 .. N 中 N 个数的序列,找出0 .. N 中没有出现在序列中的那个数. 样例 N = 4 且序列为 [0, 1, 3] 时,缺失的数为2. 挑战 在数组上 ...

  10. PHPCMSV9 黄页新闻、产品、商机均无法浏览具体信息,显示您没有访问该信息的权限!

    原帖地址:http://bbs.phpcms.cn/forum.php?mod=viewthread&tid=294956&highlight=%C3%BB%D3%D0%B7%C3%C ...