关于react.js: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属性,将它们连接成一个空格分隔的字符串。

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据