快捷導(dǎo)航

解決React報(bào)錯(cuò)No duplicate props allowed

更新時(shí)間：2022年12月05日 09:37:43 作者：chuck

這篇文章主要為大家介紹了React報(bào)錯(cuò)No duplicate props allowed解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

總覽

當(dāng)我們?yōu)橄嗤慕M件傳遞相同的屬性多次時(shí)，就會(huì)導(dǎo)致"No duplicate props allowed"警告。為了解決該警告，請(qǐng)確保只傳遞一次該屬性。比如說，如果傳遞多次className屬性，將它們連接成一個(gè)空格分隔的字符串。

下面的示例用來展示如何導(dǎo)致警告的。

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;

代碼片段中的問題在于，我們?yōu)?code>Button組件傳遞了兩次text屬性。這是不被允許的，因?yàn)榈诙€(gè)text屬性會(huì)覆蓋第一個(gè)。

請(qǐng)確保每個(gè)屬性只傳遞給同一個(gè)組件一次。

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

如果你在試圖傳遞多個(gè)className屬性時(shí)得到了錯(cuò)誤，你必須將它們串聯(lián)成一個(gè)字符串，并且只傳遞一次屬性。

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

我們不需要傳遞多個(gè)className屬性，而是要在我們?yōu)?code>className屬性設(shè)置的字符串中傳遞多個(gè)以空格分隔的類。

如果你需要在一個(gè)字符串屬性中插入變量，請(qǐng)使用模板字面量。

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;

需要注意的是，模板字面量使用反斜線``，而不是單引號(hào)。美元符號(hào)大括號(hào)${} 語(yǔ)法里的表達(dá)式，將被替換成class1和class2變量的實(shí)際值。

總結(jié)

為了解決該錯(cuò)誤，我們要確保相同的屬性只傳遞一次。如果傳遞多次className屬性，將它們連接成一個(gè)空格分隔的字符串。

以上就是解決React報(bào)錯(cuò)No duplicate props allowed的詳細(xì)內(nèi)容，更多關(guān)于React報(bào)錯(cuò)duplicate props的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

React中的useState和useEffect詳細(xì)解析
useState和useEffect是React的兩個(gè)重要Hook,用于組件狀態(tài)管理和處理副作用,useState允許添加狀態(tài)變量,控制組件渲染,而useEffect用于執(zhí)行渲染后的副作用操作,本文給大家介紹React中的useState和useEffect詳細(xì)解析,感興趣的朋友跟隨小編一起看看吧
2024-10-10
react Input組件Compositionstart和Compositionend事件
這篇文章主要為大家介紹了Compositionstart和Compositionend事件之于react組件庫(kù)Input組件的坑解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
React.memo?React.useMemo對(duì)項(xiàng)目性能優(yōu)化使用詳解
這篇文章主要為大家介紹了React.memo?React.useMemo對(duì)項(xiàng)目性能優(yōu)化的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
React?之?Suspense提出的背景及使用詳解
這篇文章主要為大家介紹了React?之?Suspense提出的背景及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
react ant protable自定義實(shí)現(xiàn)搜索下拉框
這篇文章主要介紹了react ant protable自定義實(shí)現(xiàn)搜索下拉框，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
React實(shí)現(xiàn)虛擬滾動(dòng)的三種思路詳解
在??web??開發(fā)的過程中,或多或少都會(huì)遇到大列表渲染的場(chǎng)景,為了解決大列表造成的渲染壓力,便出現(xiàn)了虛擬滾動(dòng)技術(shù),本文主要介紹虛擬滾動(dòng)的三種思路,希望對(duì)大家有所幫助
2024-04-04
react-player實(shí)現(xiàn)視頻播放與自定義進(jìn)度條效果
本篇文章通過完整的代碼給大家介紹了react-player實(shí)現(xiàn)視頻播放與自定義進(jìn)度條效果，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2022-01-01
React Hooks中模擬Vue生命周期函數(shù)的指南
React Hooks 提供了一種在函數(shù)組件中使用狀態(tài)和其他 React 特性的方式,而不需要編寫類組件,Vue 的生命周期函數(shù)和 React Hooks 之間有一定的對(duì)應(yīng)關(guān)系,本文給大家介紹了React Hooks中模擬Vue生命周期函數(shù)的指南,需要的朋友可以參考下
2024-10-10
react?component?function組件使用詳解
這篇文章主要為大家介紹了react?component?function組件的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
react-router中Link標(biāo)簽和a標(biāo)簽有什么區(qū)別
本文主要介紹了react-router中Link標(biāo)簽和a標(biāo)簽有什么區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-06-06