正文从这开始~

总览

当我们为相同的组件传递相同的属性多次时,就会导致"No duplicate props allowed"警告。为了解决该警告,请确保只传递一次该属性。比如说,如果传递多次className属性,将它们连接成一个空格分隔的字符串。

下面的示例用来展示如何导致警告的。

const App = () => {
// ️ JSX elements cannot have multiple attributes with the same name.ts(17001)
// No duplicate props allowed eslintreact/jsx-no-duplicate-props
return (
<div>
<Button text="Click" text="Submit" />
</div>
);
}; function Button({text}) {
return <button onClick={() => console.log('button clicked')}>{text}</button>;
}
export default App;

代码片段中的问题在于,我们为Button组件传递了两次text属性。这是不被允许的,因为第二个text属性会覆盖第一个。

请确保每个属性只传递给同一个组件一次。

const App = () => {
// ️ only pass text prop once
return (
<div>
<Button text="Submit" />
</div>
);
}; function Button({text}) {
return <button onClick={() => console.log('button clicked')}>{text}</button>;
}
export default App;

className

如果你在试图传递多个className属性时得到了错误,你必须将它们串联成一个字符串,并且只传递一次属性。

const App = () => {
return (
<div>
<h2 className="my-class-1 my-class-2 my-class-3">Hello world</h2>
</div>
);
}; export default App;

我们不需要传递多个className属性,而是要在我们为className属性设置的字符串中传递多个以空格分隔的类。

如果你需要在一个字符串属性中插入变量,请使用模板字面量。

const App = () => {
const class1 = 'bg-lime';
const class2 = 'text-white'; return (
<div>
<h2 className={`padding-3 ${class1} ${class2}`}>Hello world</h2>
</div>
);
}; export default App;

需要注意的是,模板字面量使用反斜线``,而不是单引号。美元符号大括号${} 语法里的表达式,将被替换成class1class2变量的实际值。

总结

为了解决该错误,我们要确保相同的属性只传递一次。如果传递多次className属性,将它们连接成一个空格分隔的字符串。

React报错之No duplicate props allowed的更多相关文章

  1. react 报错的堆栈处理

    react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...

  2. react报错 TypeError: Cannot read property 'setState' of undefined

    代码如下: class test extends Component { constructor(props) { super(props); this.state = { liked: false ...

  3. DOM解析XML报错:Content is not allowed in prolog

    报错内容为: Content is not allowed in prolog. Nested exception: Content is not allowed in prolog. 网上所述总结来 ...

  4. react报错this.setState is not a function

    当报错这个的时候就要看函数是否在行内绑定this,或者在constructor中绑定this. 我这里犯的错误的是虽然我在constructor中绑定了this,但是语法写的不正确. 错误示范: co ...

  5. React报错 :browserHistory doesn't exist in react-router

    由于版本问题,React中history不可用 import { hashHistory } from 'react-router' 首先应该导入react-router-dom包: import { ...

  6. React报错:Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix,

    今天在开发时报了以下错误,记录一下 我们不能在组件销毁后设置state,防止出现内存泄漏的情况 出现原因直接告诉你了,组件都被销毁了,还设置个锤子的state啊 解决方案: 利用生命周期钩子函数:co ...

  7. 【错误解决】git报错:you are not allowed to push code to protected branches on this project

    场景回忆: 本地修改需要退回到之前的版本,打算强制push本地版本覆盖远程版本,但是在git push --force后出现了以下的错误: Fix GitLab error: "you ar ...

  8. React报错:Laravel React-Router browserHistory 刷新子页面报错404

    举例:myblog.com/ 刷新没问题 myblog.com/add 刷新404 browserHistory报404,hashHistory却正常 原因是少路由.web.php添加路由 Route ...

  9. git push 报错:you are not allowed to upload merges

    git rebase Cannot rebase: You have unstaged changes. git stash # 每次 push 前 git pull --rebase git pus ...

  10. 报错:405 Method Not Allowed

    出现错误的原因是:静态文件不能通过post方式访问. 解决办法:改成用get方式访问.

随机推荐

  1. Redis学习笔记~目录

    回到占占推荐博客索引 百度百科 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合). ...

  2. 【转】linux root用户ifconfig报command not found

    解决办法: 方法一: 直接输入su - 回车.就可以ifconfig了 方法二: /etc/profile 把下面if语句注释掉: #path Manipulation if ["EUID& ...

  3. Asp.Net Remove Unwanted Headers

    原文:http://blogs.msdn.com/b/varunm/archive/2013/04/23/remove-unwanted-http-response-headers.aspx 原文:h ...

  4. Python3基础 map 与 lambda表达式配合 将指定系列元素乘2

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  5. JavaWeb项目中获取对Oracle操作时抛出的异常错误码

    最近在项目中碰到了这么一个需求,一个JavaWeb项目,数据库用的是Oracle.业务上有一个对一张表的操作功能,当时设置了两个字段联合的唯一约束.由于前断没有对重复字段的校验,需要在插入时如果碰到唯 ...

  6. hdu_2668 Daydream O(n)求最长不重复子串

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2668 Daydream Time Limit: 2000/1000 MS (Java/Others)  ...

  7. CSS3之border-radius圆角

    CSS3之border-radius圆角 DIV盒子圆角 图片圆角,CSS3样式实现盒子对象圆角.图片圆角效果.div css3 border-radius圆角样式教程篇. 一.css3单词与语法结构 ...

  8. 8Manage:数据安全,企业新时代的护航利器

    数据安全,是个老生常谈的话题,但是安全往往是在危险的时候方能体现出来,因此,这也是很容易被人们所忽略的部分.2017年,数据安全事件更是屡屡登上头条,除了个人信息的数据泄露之外,还有网络病毒造成的全球 ...

  9. Spring Cloud 2.x-前言

    Spring Cloud Spring Boot  简介 模块介绍 文章列表 简介 微服务已经成为企业开发的标配,阿里的Dubbo已经被企业大规模使用,Spring Cloud作为后起之秀,同时也是 ...

  10. 《HTTP权威指南》4-连接管理

    TCP连接 TCP/IP是全球计算机及网络设备都在使用的一种常见的分组交换网络分层协议集客户端应用程序可以打开一条TCP/IP连接.连接到可能运行在世界任何地方的服务器应用程序 TCP的可靠数据管道 ...