世界上最伟大的投资就是投资自己的教育
此次更改:https://github.com/hfpp2012/hello-react/commit/f468f017eef2323b6ba858087f124b2c83432305
src/components/Home.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class Home extends Component {
constructor(props) {
super(props);
this.age = this.props.age;
}
onMakeOlder() {
this.age += 3;
console.log(this);
}
render() {
return (
<div className="container">
<div className="row">
<div className="col-xs-1 col-xs-offset-11">
<div>your name is {this.props.name}, your age is {this.props.age}</div>
<button onClick={() => {this.onMakeOlder()}} className="btn btn-primary">Make me older</button>
</div>
</div>
</div>
);
}
}
Home.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
user: PropTypes.object,
children: PropTypes.element.isRequired
};
07:251Free诱人的 React 免费视频教程 - 基础篇 #1 介绍
04:182Free诱人的 React 免费视频教程 - 基础篇 #2 create-React-app
07:423Free诱人的 React 免费视频教程 - 基础篇 #3 第一个组件
05:094Free诱人的 React 免费视频教程 - 基础篇 #4 多个组件
02:295Free诱人的 React 免费视频教程 - 基础篇 #5 输出动态数据
11:226Free诱人的 React 免费视频教程 - 基础篇 #6 通过 Props 传递数据
07:24Free诱人的 React 免费视频教程 - 基础篇 #7 事件
03:548Free诱人的 React 免费视频教程 - 基础篇 #8 组件的 state 属性
04:329Free诱人的 React 免费视频教程 - 基础篇 #9 React 如何更新 dom
05:4310Free诱人的 React 免费视频教程 - 基础篇 #10 无状态组件
05:5111Free诱人的 React 免费视频教程 - 基础篇 #11 子组件向父组件传值
07:0512Free诱人的 React 免费视频教程 - 基础篇 #12 组件间传值
06:5713Free诱人的 React 免费视频教程 - 基础篇 #13 双向数据绑定
20:4114Free诱人的 React 免费视频教程 - 基础篇 #14 组件生命周期(完结)
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
微信:qiuzhi99pro
b 站:https://space.bilibili.com/31152817
知乎:https://www.zhihu.com/people/rails365
Github:https://github.com/hfpp2012
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
© 汕尾市求知科技有限公司 | 创业者社区 | Rails365 Gitlab | Qiuzhi99 Gitlab | Railstart 创业项目 | 知乎 | b 站 | 搜索
粤公网安备 44152102000088号
| 粤ICP备19038915号
就是唯一的疑惑是 creact-react-app 这么做到 className='btn btn-primary'的,而且没看到你调用 Bootstrap 啊~
就在前面有说 你去翻翻呗
在 index.html 页面引入
constructor(props) {
super(props);
this.age = this.props.age;
}
这一段不是很明白既然 this.props.age 是从父节点传过来的参数那么 this.age 是什么是给当前 class 声明一个变量么,既然是继承了父节点那么这个 super 是指 app.js 么还是 react 的类共有的父类,为什么不从 super.props.age 这样直接取父节点的值,我是做 java 的对 this 可能不像前端那么敏感,我觉得 this 就是值当前这个类,谁能给我科普一下这个 this,我用 const age = this,props.age;数据的结果是 NaN 啥意思啊
super 是调用 父类的构造函数,是个方法,不能用 super.props.age 这样 this.age 是 给当前实例添加一个属性 age ,不像 java,可能比较松散灵活一些, NaN 是报错信息,表示不是 一个 number
super()是调用父类的构造函数这个 java 也是这样写的。这和 this 有点不是很明白,this.age 是给当前实例添加一个属性这类似 java 的面向对向么,这个实例值得是谁 Home 这个 class 么,我试着这么写
const age = 0;
constructor(props) {
super(props);
age = this.props.age;
}
我是想申明一个 Home 的全局变量但是语法检测不通过,react 不能再 class 中的函数外申明变量么
也可能是我一时缓不过来吧,以后写多了自然就能理解了
你这样写只是在试,没有啥根据,你可以了解下 es6 class 相关的知识点,可能就会好一些,写多了可能就自然理解了。
其实我只是不理解什么时候该使用 this
习惯把代码逻辑注释