正文从这开始~
总览
当我们为相同的组件传递相同的属性多次时，就会导致"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 ();
};
function Button({text}) {
return ;
}
export default App;
代码片段中的问题在于，我们为
Button组件传递了两次text属性。这是不被允许的，因为第二个text属性会覆盖第一个。请确保每个属性只传递给同一个组件一次。
const App = () => {
// ? only pass text prop once
return ();
};
function Button({text}) {
return ;
}
export default App;
className 如果你在试图传递多个
className属性时得到了错误，你必须将它们串联成一个字符串，并且只传递一次属性。const App = () => {
return (Hello world);
};
export default App;
我们不需要传递多个
className属性，而是要在我们为className属性设置的字符串中传递多个以空格分隔的类。如果你需要在一个字符串属性中插入变量，请使用模板字面量。
const App = () => {
const class1 = 'bg-lime';
const class2 = 'text-white';
return (Hello world);
};
export default App;
需要注意的是，模板字面量使用反斜线
``，而不是单引号。美元符号大括号${} 语法里的表达式，将被替换成class1和class2变量的实际值。总结 【React报错之No duplicate props allowed】为了解决该错误，我们要确保相同的属性只传递一次。如果传递多次
className属性，将它们连接成一个空格分隔的字符串。推荐阅读
- React报错之Objects are not valid as a React child
- React报错之map() is not a function
- react高频面试题总结（一）
- React高频面试题合集（二）
- React报错之ref返回undefined或null
- React报错之Property 'X' does not exist on type 'HTMLElement'
- React报错之Cannot find name
- React报错之Object is possibly null
- React|React UI组件库——如何快速实现antd的按需引入和自定义主题