React报错之No duplicate props allowed
正文从这开始~
总览
当我们为相同的组件传递相同的属性多次时,就会导致"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;
需要注意的是,模板字面量使用反斜线``,而不是单引号。美元符号大括号${}
语法里的表达式,将被替换成class1
和class2
变量的实际值。
总结
为了解决该错误,我们要确保相同的属性只传递一次。如果传递多次className
属性,将它们连接成一个空格分隔的字符串。
React报错之No duplicate props allowed的更多相关文章
- react 报错的堆栈处理
react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...
- react报错 TypeError: Cannot read property 'setState' of undefined
代码如下: class test extends Component { constructor(props) { super(props); this.state = { liked: false ...
- DOM解析XML报错:Content is not allowed in prolog
报错内容为: Content is not allowed in prolog. Nested exception: Content is not allowed in prolog. 网上所述总结来 ...
- react报错this.setState is not a function
当报错这个的时候就要看函数是否在行内绑定this,或者在constructor中绑定this. 我这里犯的错误的是虽然我在constructor中绑定了this,但是语法写的不正确. 错误示范: co ...
- React报错 :browserHistory doesn't exist in react-router
由于版本问题,React中history不可用 import { hashHistory } from 'react-router' 首先应该导入react-router-dom包: import { ...
- React报错之Cannot find name
正文从这开始~ .tsx扩展名 为了在React TypeScript中解决Cannot find name报错,我们需要在使用JSX文件时使用.tsx扩展名,在你的tsconfig.json文件中把 ...
- React报错之Cannot find namespace context
正文从这开始~ 总览 在React中,为了解决"Cannot find namespace context"错误,在你使用JSX的文件中使用.tsx扩展名,在你的tsconfig. ...
- React报错之Expected `onClick` listener to be a function
正文从这开始~ 总览 当我们为元素的onClick属性传递一个值,但是该值却不是函数时,会产生"Expected onClick listener to be a function" ...
- 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 ...
随机推荐
- 【多线程】可重入锁 ReentrantLock
java除了使用关键字synchronized外,还可以使用ReentrantLock实现独占锁的功能.而且ReentrantLock相比synchronized而言功能更加丰富,使用起来更为灵活,也 ...
- ID为XXXX的进程当前未运行
项目文件夹下,有个.vs的文件夹,删除掉,然后重新打开项目就ok了. 或者: 在启动项目根目录下用文本编辑器打开Web项目下的{X}.csproj文件,然后查找 <WebProjectPrope ...
- 前端3JS2
内容概要 运算符 流程控制 三元运算符 函数 自定义对象 内置对象 JSON对象 正则对象 内容详情 运算符
- Spark读取elasticsearch数据指南
最近要在 Spark job 中通过 Spark SQL 的方式读取 Elasticsearch 数据,踩了一些坑,总结于此. 环境说明 Spark job 的编写语言为 Scala,scala-li ...
- Dcoker镜像管理与容器应用
Dcoker镜像管理与容器应用 docker基于镜像创建容器 相同版本的镜像只允许存在一个 同一个镜像可以创建多个容器 镜像管理 [root@localhost ~]# docker pull cen ...
- pytorch自定义模型时实现父类构造函数的问题
问题 有的类继承nn.Module在init函数里面是super(类名, self).init():但是有的里面就是super().init() exp: · 解答: python2与python3的 ...
- 到点了开始网抑云(悲)但是用python(整活)
写在前面的一点网抑云: 爱情不是随便许诺好了不想再说了没错 是我那么多的冷漠 让你感觉到无比的寂寞不过 一个女人的不仅仅渴望得到的一个承诺我害怕欺骗也害怕寂寞更害怕我的心会渐渐地凋落爱情不是随便许诺好 ...
- 基于.NetCore开发博客项目 StarBlog - (14) 实现主题切换功能
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- Optional 类
@Test public void test2(){ Girl girl = new Girl(); // girl = null; //ofNullable(T t):t可以为null Option ...
- Servlet-2获取请求,响应结果
获取请求参数值1)HttpServletRequest ① 该接口是ServletRequest接口的子接口,封装了HTTP请求的相关信息,由Servlet容器创建其实现类对象并传入serv ...