class WebSite extends React.Component {
constructor() {
super(); this.state = {
name: "菜鸟教程",
site: "https://www.runoob.com"
}
}
render() {
return (
<div>
<Name name={this.state.name}/>
<Link site={this.state.site} />
</div>
);
}
} class Name extends React.Component {
constructor(props) {
super(props)
console.log(this.props) // 如果使用super() 这里输出undefined
}
render() {
return (
<h1>{this.props.name}</h1>
);
}
} class Link extends React.Component {
render() {
return (
<a href={this.props.site}> // 使用了super可以this.props获取传入的参数 未使用报错
{this.props.site}
</a>
);
}
} ReactDOM.render(
<WebSite />,
document.getElementById('example')
);
</script> </body>
</html>

  子类继承父类的属性:需要使用super()继续父类的属性,同时创建this(子类本身没有this);

如果子组件中没有constructor没有显式定义。会默认天机constructor super()

super(props)的作用就是在父类的构造函数中给props赋值一个对象this.props=props这样就能在它的下面定义你要用到的属性了,然而其他的由于没有传参就直接赋值为undefind

由于state下面没有属性,所以如果只是定义state就可以直接super()

如何理解react中的super() super(props)的更多相关文章

  1. react中constructor和super()以及super(props)的区别。

    react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...

  2. react中constructor()和super()的具体含义以及如何使用

    1.constructor()---super( )的基本含义 constructor()--构造方法 这是ES6对类的默认方法,通过new命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的 ...

  3. React中的state与props的再理解

    props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性.在大多数React教程里讲 state 和 props 主要的区别在于 props 是不可变的, ...

  4. React中的State与Props

    一.State 1.什么是 state 一个组件的显示形态可以由数据状态和外部参数决定,其中,数据状态为 state,外部参数为 props 2.state 的使用 组件初始化时,通过 this.st ...

  5. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

  6. 深入理解react中的虚拟DOM、diff算法

    文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   ...

  7. react中使用prop-types检测props数据类型

    一.为什么使用prop-types 在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想 ...

  8. React中state和props分别是什么?

    整理一下React中关于state和props的知识点. 在任何应用中,数据都是必不可少的.我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据.React的数据是自顶向下 ...

  9. React中state与props介绍与比较

    一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...

随机推荐

  1. Spring中重要的注解

    现在大部分的Spring项目都会用到注解.使用注解来替换xml,一行简单的注解就可以解决很多事情.但是你真的懂其中的原理吗. 本文翻译于 https://docs.spring.io/spring-f ...

  2. [转帖]规模化敏捷-简要对比SAFe、LeSS和DAD模式

    规模化敏捷-简要对比SAFe.LeSS和DAD模式 http://blog.sina.com.cn//s/blog_15e1409550102x5yx.html   分类: 敏捷开发 目前有三种将Sc ...

  3. CentOS7下MySQL服务启动失败原因及解决方法

    在重启阿里的CentOS7服务器后,重启MySQL 出现错误 Starting mysqld (via systemctl): Job for mysqld.service failed becaus ...

  4. 继续:Ruby on Rails 简单了解

    一. 接着上一篇继续 1.限制微博的长度 在 Rails 中实现这种限制很简单,使用验证(validation)功能即可.要限制微博的长度最多为 140 个字符 (1).打开文件:app/models ...

  5. Jconsole与Jmx 分析JVM状况(上) 转

    出处:Jconsole与Jmx 分析JVM状况(上) JVM 平台提供 Mbeans 说明 在 Java 2 平台 5.0 以上版本,有一组 API 可以让 Java 应用程序和允许的工具监视和管理  ...

  6. DAX/PowerBI系列 - 关于时间系列 - 如何用脚本生成时间维度 (Generate TIME Dimension)

    DAX/PowerBI系列 - 关于时间系列 - 如何用脚本生成时间维度 (Generate TIME Dimension) 难度: ★☆☆☆☆(1星) 适用范围: ★★★★★(5星) 这个时间系列想 ...

  7. Codeforces 1194F. Crossword Expert

    传送门 考虑每一个位置的期望贡献 $P[i]$ 对于第 $k$ 个位置,设 $sum=\sum_{i=1}^{k}t[k]$,那么 $T-sum$ 即为用最短时间完成完位置 $k$ 后多出来的空闲时间 ...

  8. Linux下用OTL操作MySql(包含自己封装的类库及演示样例代码下载)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/ClamReason/article/details/23971805 首先重点推荐介绍otl介绍及使 ...

  9. 数据绑定-@ CookieValue

    测试:

  10. @RequestMapping-限定参数映射

    限定参数映射 测试: