解决React报错No duplicate props allowed

 更新时间:2022年12月05日 09:37:43   作者:chuck  
这篇文章主要为大家介绍了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;

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

总结

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

以上就是解决React报错No duplicate props allowed的详细内容,更多关于React报错duplicate props的资料请关注脚本之家其它相关文章!

相关文章

  • 基于PixiJS实现react图标旋转动效

    基于PixiJS实现react图标旋转动效

    PixiJS是一个开源的基于web的渲染系统,为游戏、数据可视化和其他图形密集型项目提供了极快的性能,这篇文章主要介绍了用PixiJS实现react图标旋转动效,需要的朋友可以参考下
    2022-05-05
  • 详解react的两种动态改变css样式的方法

    详解react的两种动态改变css样式的方法

    这篇文章主要介绍了详解react的两种动态改变css样式的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • React Native基础入门之初步使用Flexbox布局

    React Native基础入门之初步使用Flexbox布局

    React中引入了flexbox概念,flexbox是属于web前端领域CSS的一种布局方案,下面这篇文章主要给大家介绍了关于React Native基础入门之初步使用Flexbox布局的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2018-07-07
  • React useEffect的理解与使用

    React useEffect的理解与使用

    这篇文章主要介绍了React useEffect的理解与使用,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下
    2021-04-04
  • antd+react中upload手动上传单限制上传一张

    antd+react中upload手动上传单限制上传一张

    本文主要介绍了antd+react中upload手动上传单限制上传一张,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • react路由v6版本NavLink的两个小坑及解决

    react路由v6版本NavLink的两个小坑及解决

    这篇文章主要介绍了react路由v6版本NavLink的两个小坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 浅谈React Native 传参的几种方式(小结)

    浅谈React Native 传参的几种方式(小结)

    这篇文章主要介绍了浅谈React Native 传参的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • React如何自定义轮播图Carousel组件

    React如何自定义轮播图Carousel组件

    这篇文章主要介绍了React如何自定义轮播图Carousel组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • React 状态管理工具优劣势示例分析

    React 状态管理工具优劣势示例分析

    这篇文章主要为大家介绍了React 状态管理工具优劣势示例分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • React中useEffect函数的使用详解

    React中useEffect函数的使用详解

    useEffect是React中的一个钩子函数,用于处理副作用操作,这篇文章主要为大家介绍了React中useEffect函数的具体用法,希望对大家有所帮助
    2023-08-08

最新评论