日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

解決React報錯No?duplicate?props?allowed_React

作者：chuck ? 更新時間： 2023-01-01 編程語言

總覽

當我們為相同的組件傳遞相同的屬性多次時，就會導致"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屬性，將它們連接成一個空格分隔的字符串。

原文鏈接：https://juejin.cn/post/7128405783384948773

欄目分類
最近更新