如何理解react中的super() super(props)
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)的更多相关文章
- react中constructor和super()以及super(props)的区别。
react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...
- react中constructor()和super()的具体含义以及如何使用
1.constructor()---super( )的基本含义 constructor()--构造方法 这是ES6对类的默认方法,通过new命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的 ...
- React中的state与props的再理解
props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性.在大多数React教程里讲 state 和 props 主要的区别在于 props 是不可变的, ...
- React中的State与Props
一.State 1.什么是 state 一个组件的显示形态可以由数据状态和外部参数决定,其中,数据状态为 state,外部参数为 props 2.state 的使用 组件初始化时,通过 this.st ...
- 理解React中es6方法创建组件的this
首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...
- 深入理解react中的虚拟DOM、diff算法
文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么? ...
- react中使用prop-types检测props数据类型
一.为什么使用prop-types 在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想 ...
- React中state和props分别是什么?
整理一下React中关于state和props的知识点. 在任何应用中,数据都是必不可少的.我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据.React的数据是自顶向下 ...
- React中state与props介绍与比较
一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...
随机推荐
- Linux C/C++基础——变量作用域
1.局部变量 局部变量也叫auto自动变量(auto可写可不写),一般情况下代码块{}内部定义的变量都是自动变量,它有如下特点: 只有当执行到这句语句时,系统才为这个变量分配空间 在一个函数内定义,只 ...
- eclipse 导入项目出现的问题汇总
Unbound classpath variable: 'TOMCAT_HOME' in project XXX Problem 翻译:未绑定的类路径变量:项目XXX中的“TOMCAT_HOME” 解 ...
- Microsoft Visual Studio 中工具箱不显示DevExpress控件的解决办法
我安装的是DevExpress15.2 1.找到安装目录D:\Program Files\DevExpress15.2\Components\Tools, 运行控制台 内容换成cmd 2.执行下面的命 ...
- flask_migrate 的应用
怎么查看的命令: python manage.py --help 使用flask_migrate的注意事项:
- mac环境提示:make sure that /usr/local/bin is in your path
今天我在Mac环境下安装了Homebrew和node.js后,输入node -v.brew.npm都提示: command not found,然后我查看了下Homebrew的安装日志,发现日志里有个 ...
- [c++] WINAPI
int WINAPI WINMain 中,WINAPI含义 在windef.h头文件中有如下定义: #define WINAPI __stdcall #define APIENTRY WINAPI 函 ...
- C++ 的关键字(保留字)完整介绍
转载至:https://www.runoob.com/w3cnote/cpp-keyword-intro.html 1. asm asm (指令字符串):允许在 C++ 程序中嵌入汇编代码. 2. a ...
- PHP使用CURL抓取页面
cURL的基本原理 curl是利用URL语法在命令行方式下工作的开源文件传输工具,他能够从互联网上获得各种各样的网络资源.简单来说,curl就是抓取页面的升级版. <?php //1.初始化,创 ...
- 学习python基础规则
前面应该是记流水账的方式,毕竟学习的内容不多无法产出什么有效的内容. 这两天从开始下载Python开始学习,一路顺畅冒的问题,直到开始学习python的游戏规则,严格缩进.注释及‘’的使用等感觉还不错 ...
- 通过PlayBook部署Zabbix
编写Linux初始化剧本 初始化剧本环节,主要用户实现关闭Selinux关闭防火墙,一起配置一下阿里云的YUM源地址,和安装EPEL源,为后期的zabbix安装做好铺垫工作. 1.在安装Zabbix之 ...