正文从这开始~

总览

当我们为相同的组件传递相同的属性多次时,就会导致"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属性,将它们连接成一个空格分隔的字符串。

标签智能推荐:

React项目中应用TypeScript

单独的使用typescript&nbsp;并不会导致学习成本很高,但是绝大部分前端开发者的项目都是依赖于框架的例如和vue、react&nbsp;这些框架结合使用的时候,会有一定的门槛使用&nbsp;TypeScript&nbsp;编写&nbsp;react&nbsp;代码,除了需要&nbsp;typescript&nbsp;这个库之外,还需要安装@types/react、@types/react

react 入门

}exportdefaultWelcome;&nbsp;props&nbsp;vue中和react中的不同&nbsp;&nbsp;react中//父组件中&lt;Listtuser={comment.cy}/&gt;//向子组件传输comment的对象在react是这种写法把comment.cy复制给user然后在子组件中通过props.user使用传过去的值(注意子组件的函数中需要写props参

react 中的 super super(props)

报错。&nbsp;&nbsp;&nbsp;报错的原因是:子类是没有自己的this对象的,它只能继承自父类的this对象,然后对其进行加工,而super()就是将父类中的this对象继承给子类的。没有super,子类就得不到this对象。2&nbsp;super(props)------super()-----以及不写super的区别&nbsp;&nbsp;如果你用到了constructor就必须写

组件实例三大属性

候我们不传props,只执行super(),或者没有设置constructor的情况下,依然可以在组件内使用this.props,为什么呢?其实React在组件实例化的时候,马上又给实例设置了一遍props://React内部constinstance=newYourComponent(props);instance.props=props;虽然React会在组件实例化的时设置一遍props,但在

组件间通讯及钩子函数

共享某些数据。为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通。这个过程就是组件通讯。组件的props组件是封闭的,要接收外部数据应该通过props来实现props的作用:接收传递给组件的数据传递数据:给组件标签添加属性接收数据:函数组件通过参数props接收数据,类组件通过this.props接收数据示例:/**props函数组件**/constHello=props=&gt;{co

react 02 组件state click

一,组件importReactfrom'react';importReactDOMfrom'react-dom';import'./index.css';//函数式组件returnfunctionHello(props){lettitleName=&lt;p&gt;这是Hello副标题&lt;/p&gt;return(&lt;div&gt;&lt;h1&gt;今天天气:{props.weather

react-native引入Antd-mobile

/react-native2.antd-mobile-rn里面有很多Icon和font如果需要引入,则下载yarnadd@ant-design/icons-react-native3.在根目录创建.babelrc{"plugins":[["import",{"libraryName":"@ant-design/react-native"}]]}4.安装其他依赖yarnadd@react-nativ

从零开始的react入门教程(十一),react ref 详解,三种写法与 ref 转发(传递)

作为props传递下去后再绑定,这样不管B是不是函数组件,都能成功绑定到C,再来个例子:importReact,{Component,forwardRef}from'react';importReactDOMfrom'react-dom';functionChildren(props){return(//子组件接受了这个ref,然后再通过ref进行绑定&lt;inputref={props.inp

react实战 系列 —— React 的数据流和生命周期

其他章节请看:数据流和生命周期如何处理React中的数据,组件之间如何通信,数据在React中如何流动?常用的React生命周期方法以及开源项目spug中使用了哪些生命周期方法?数据和数据流虽然也有很多静态网站,但人们使用的大多数网站都充满了随时间变化的数据。state和props是React组件处理数据和彼此通信的两种主要方法。React提供了两个数据相关的api:state和props。前面我

React 列表页面传递参数

React列表进入详情页面首先安装react-router-dom(4.0)npm/yarninstallreact-router-dom路由跳转配置列表父组件this.props.history.push({pathname:'/detail',state:data})上述的data为明细的数据那么详情页面如何接收父组件的数据呢?constdetaildata=this.prop.locatio