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

原文地址:https://www.cnblogs.com/mengff/p/9822266.html

时间: 2024-10-20 18:52:54

warning: React does not recognize the xxx prop on a DOM element的相关文章

webpacck打包完react后引入到html文件中报错:Target container is not a DOM element...

手动写了一个react程序,用webpack打包后生成了一个bundle,js文件,然后引入到index.html文件夹后,在浏览器打开该html文件,报错Target container is not a DOM element,一直找原因发现是引入bundle.js的顺序不对,应该放在div元素的下方,下面具体看代码 react相关js内容 var React = require('react');var ReactDom = require('react-dom');const eleme

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 file /data/mysql/server2.lower-test 2014-12-11 16:22:57 26309 [Warning] Can't create test file /data/mysql/server2.lower-test 2014-12-11 16:22:57 26309 [

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

在上一篇文章中,我们总结并模拟了JSX生成真实DOM结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({name}) { return <div>{`hello ${name}`}</div>; }; const App = <Greeting name="scott"/>; console.log(App); ReactDOM.render(App, docum

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.lastClickTime[id] && ((new Date())-this.lastClickTime[id])>70) {//quick click twice , it seems a dblclick console.log('dblclick'); this.lastClickTime[id]

way.js

1 (function (root, factory) { 2 3 if (typeof define === "function" && define.amd) { 4 define(factory); 5 } else if (typeof exports === "object") { 6 module.exports = factory(); 7 } else { 8 root.way = factory(); 9 } 10 11 }(thi

react 杂记

之前看过一次react,但是忘得干净,这次重新学习 react是什么? react的是JavaScript MVC框架中的V,可以在浏览器端运行,也可以由服务端node.js渲染 创建的初衷:facebook不满足市场JavaScript的MVC框架创建, 运行机制:我们总是将变化的数据实时体现到ui上,就会频繁的操作DOM元素,非常印象性能,react是在浏览器端用JavaScript实现一套DOM API,基于react进行开发的所有DOM都是通过虚拟DOM进行的,每当数据变化时,react

react与jQuery对比,有空的时候再翻译一下

参考资料:http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/ Target Audience: People Who Know Just Enough jQuery to Get by Before I begin, I'd like to clarify who my target audience is. Zed Shaw, the a

React Router 按需加载+服务器渲染的闪屏问题

伴随着React协议的『妥协』(v16采用MIT),React为项目的主体,这个在短期内是不会改变的了,在平时使用过程中发现了如下这个问题: 在服务器渲染的时候,刷新页面会出现闪屏的现象(白屏一闪而过) 作为努力最求极致的我,是不能容忍的,而这一现象是半道出现的,也就是在添加按需加载之后.要说清楚这个问题,得从React的服务器渲染开始说起,(急于寻求问题解决方案的,可以直接去文章后半部分) 服务器渲染(SSR)基础原理 React的虚拟DOM是其可被用于服务端渲染的关键.其原理简单的来说就是首

使用React的static方法实现同构以及同构的常见问题

代码地址请在github查看,假设有新内容.我会定时更新.也欢迎您star,issue,共同进步 1.我们服务端渲染数据从何而来 1.1 怎样写出同构的组件 服务端生成HTML结构有时候并不完好.有时候不借助js是不行的.比方当我们的组件须要轮询服务器的数据接口,实现数据与服务器同步的时候就显得非常重要.事实上这个获取数据的过程能够是数据库获取,也能够是从其它的反向代理服务器来获取. 对于client来说,我们能够通过ajax请求来完毕,仅仅要将ajax请求放到componentDidMount