菜比如我的漫漫react学习路(二)

基础部分学差不多了，说说state和props

state：

class listData extends React.Component{

　　//es6 的语法，详情请出门右转看ES6

　　constructor(...props){
　　　　super(...props)
}

　　//也就这个state这个没有用react自己的getInitialState

　　this.state = {

　　　　testState:1

　　}

　　//其他的react生命周期照样可以使用，不过，注意没有逗号~

　　componentDidMount(){

　　　　//code balabala

　　}

　　changeState(){

　　　　this.setState({

　　　　　　testState: ++ this.state.testState

　　　　},()=>{//这个是setState的第二个参数，也就是一个function，就是一个回调函数，在state修改完之后，你想做的事情就可以放在这里

　　　　　　console.log(this.state.testState)

　　　　})

　　}

　　render(){

　　　　return(

　　　　　　<div onClick = {this.changeState.bind(this)}>测试那么一下</div>

　　　　)　　

　　}

现在来说说props

除去redux里的，我现在用到的props，都是在父子组件之间传值

let Parent = React.createClass({

　　getInitialState({

　　　　return{

　　　　　　tabIndex:1

　　　　}

　　}),

　　render(){

　　　　return(

　　　　　　<div>

　　　　　　　　<Child parent = {this}/>//把需要传给子组件的东西放在这里，可以直接把父组件的this传给子组件

　　　　　　</div>

　　　　)

　　}

})

let Child = React.createClass({

　　render(){

　　　　return(

　　　　　　<div>{this.props.parent.state.tabIndex}</div> //this.props.parent取到的就是父组件传过来的this,父组件的this都拿到了，那么父组件里的其他东西也就可以拿到了。

　　　　)

　　}

})

转载于:https://www.cnblogs.com/zdzx939/p/6762113.html

菜比如我的漫漫react学习路(二)相关推荐

react ui框架_Web开发 React 学习（二十）连载基础篇大结局
系列文章: 测开技能--Web开发 React 学习(一) 测开技能--Web开发 React 学习(二)环境搭建测开技能--Web开发 React 学习(三)元素的渲染测开技能--Web开发 R ...
React学习笔记二：实现一个数字时钟
<!DOCTYPE html> <html lang="zhm"><head><meta charset="UTF-8" ...
漫漫Java学习路,第二天
package cn.tedu.basic; //本类用于测试注释是否会被运行 public class CommentDemo {//我是一个单行注释/* 我* 是* 一* 个* 多* 行* 注* ...
漫漫Java学习路,第四天
package cn.tedu.basic; //本类用于测试for循环 public class TestFor {public static void main(String[]ages) {fo ...
漫漫Java学习路,第七天
package cn.tedu.oop; //本类用于测试代码块 public class TestBlock {public static void main(String[] args) {//S ...
漫漫Java学习路,第五天
package cn.tedu.array; import java.util.Arrays; //本类用于练习数组的创建 public class TestArray {public static ...
React学习笔记二——react-router
2019独角兽企业重金招聘Python工程师标准>>> 今天写了一个关于react-router的demo,因为不喜欢下载太多的依赖包,所以就直接引得js,解析会比较慢一些. 首先先 ...
React学习笔记二通过柯里化函数实现带参数的事件绑定
class Login extends React.Component {state = {username: '',password: ''}saveFormData = (type) => ...
React学习笔记(二) | 受控组件
React组件目标能够知道受控组件是什么能够写出受控组件了解非受控组件表单处理受控组件(★★★) HTML中的表单元素是可输入的,也就是有自己的可变状态而React中可变状态通常保存在s ...
React学习（三）：通过 React 编写名片组件（React属性）
阿里云服务器0元试用,首购低至0.9元/月起 [开发云]年年都是折扣价,不用四处薅羊毛前置内容阅读 React学习(二):编写 React 组件并成功挂载效果预览: 1. 启动 my-projec ...

菜比如我的漫漫react学习路(二)

菜比如我的漫漫react学习路(二)相关推荐

最新文章

热门文章