React報錯之No duplicate props allowed
- 2022 年 8 月 5 日
- 筆記
正文從這開始~
總覽
當我們為相同的組件傳遞相同的屬性多次時,就會導致"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
屬性,將它們連接成一個空格分隔的字元串。