React报错之No duplicate props allowed

2022-08-19 16:39:09 浏览数 (1)

原文链接：https://bobbyhadz.com/blog/react-jsx-no-duplicate-props[1]

作者：Borislav Hadzhiev[2]

正文从这开始~

总览

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

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

代码语言：javascript复制
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属性会覆盖第一个。

请确保每个属性只传递给同一个组件一次。

代码语言：javascript复制
const App = () => {
  // 


	


https 网络安全 react 编程算法 




	






	

 0 人点赞