T O P

[资源分享]     React报错之No duplicate props allowed

  • By - 楼主

  • 2022-08-06 00:04:12
  • 正文从这开始~

    总览

    当我们为相同的组件传递相同的属性多次时,就会导致"No duplicate props allowed"警告。为了解决该警告,请确保只传递一次该属性。比如说,如果传递多次className属性,将它们连接成一个空格分隔的字符串。

    下面的示例用来展示如何导致警告的。

    const App = () => {
      // :no_entry:️ 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 = () => {
      // :point_down:️ 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属性,将它们连接成一个空格分隔的字符串。

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册