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. 分片式图片服务器fastDFS安装过程

    1. 什么是FastDFS FastDFS 是用 c 语言编写的一款开源的分布式文件系统.FastDFS 为互联网量身定制, 充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标, ...

  2. CISCO路由器WAN口动态ISP配置

        Building configuration... version 15.0 service timestamps debug datetime msec service timestamps ...

  3. Azure Blob 存储简介

    Azure Blob 存储是 Microsoft 提供的适用于云的对象存储解决方案. Blob 存储最适合存储巨量的非结构化数据. 非结构化数据是不遵循特定数据模型或定义(如文本或二进制数据)的数据. ...

  4. python 学习笔记三 (元编程)

    #动态创建类 # type(class_name, tuple_of_parent_class, dict_of_attribute_names_and_values), 第二个参数为继承关系,可以为 ...

  5. 使用HTMLTestRunner生产报告

    HTMLTestRunner下载安装及用法 1. 说明 HTMLTestRunner 是 Python 标准库的 unittest 模块的一个扩展.它生成易于使用的 HTML 测试报告 本文针对Pyt ...

  6. 使用idea关联mysql时报错Server returns invalid timezone. Go to 'Advanced' tab and set 'serverTimezon'

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/liuqiker/article/detai ...

  7. Laravel-admin 表单提交同时验证俩个以上的字段唯一值

    $name = isset(request()->all()['name']) ? request()->all()['name'] : ''; $id = isset(request() ...

  8. Python 入门 之 类的约束以及super()剖析

    Python 入门 之 类的约束以及super()剖析 1.类的约束 第一版: class WechatPay: def pay(self): print("微信支付") clas ...

  9. 前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)

    目录 CSS(Cascading Style Sheet) CSS注释 CSS语法结构 CSS的三种引入方式 选择器 伪类.伪元素选择器速查 CSS选择器优先级***** 选择器相同的情况下 选择器不 ...

  10. ACM的一点基础知识

    所摘内容来自于XJTU小学期ACM培训PPT log 默认以2为底 计算机一秒可以看作1e8次 保证数据计算精度及数据所需必要大小 a=1LL*a*a%p//在计算时通过乘以1LL,临时将Int转化为 ...