啦啦啦啦啦啦啦啦啦

发表于 | 分类于

Welcome to bingTang的博客! If you get any problems when reading, you can send me an email 1569025161@qq.com.

组件之间的通信方式

  • 父向子
  • 子向父
  • 兄弟间

这里主要介绍前两种

1.父组件向子组件通信（子类用父类的资源）

  • 子组件用父组件属性

    eg:这里的likedText与unlikedText

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    class LikeButton extends Component {
    	render () {
    	    return (
    	      	<ToggleButton likedText='喜欢' unlikedText='讨厌' />
    	    );
    	}
    };
    class ToggleButton extends Component {
    	constructor () {
    		super();
    		this.handleClickOnLikeButton = this.handleClickOnLikeButton.bind(this);
    		this.state = {isLiked: true};
    	}
    	handleClickOnLikeButton () {
    		this.setState({
    			isLiked: !this.state.isLiked
    		})
    	}
      	render () {
    	    return (
    	        <button onClick={this.handleClickOnLikeButton} >	
    				{this.state.isLiked ? this.props.likedText : this.props.unlikedText}
    			</button>
    	    );
      	}
    };

  • 子组件用父组件方法

    eg：这里的handleChange方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
     class HelloMessage  extends Component {
    	constructor () {
    		super();
    		this.handleChange = this.handleChange.bind(this);
    		this.state = {value: 'Hello Runoob!'};
    	}
    	
    	handleChange (event) {		
        	this.setState({value: '菜鸟教程'});
      	}
    	render () {
    	    return (
    	      	<div>
                	<Content myDataProp = {this.state.value} 
                  		that = {this}>
                  	</Content>
               </div>
    	    );
    	}
    };
    class Content extends Component {
    	handleClick () {
    		let that = this.props.that;
    		that.handleChange();
    	}
    	render () {
    		console.log('updateStateProp',this.props.updateStateProp);
    		return(
    	   		<div>
    	            <button onClick = {this.handleClick.bind(this)}>点我</button>
    	            <h4 style={{fontSize: '20px'}}>{this.props.myDataProp}</h4>
    	        </div>
    	    )
    	}
    };
    • 这里将父类的this赋给that属性
    • 在子类中将父类的that属性赋给 that变量，this.props.that，再将父类的方法在子类中包装起来handleClick()
    • 这样在子类中就可以直接调用handleClick啦!

2.子组件向父组件通信（父类用子类的资源）

要调用子组件的方法或者属性，需要在调用子组件的时候定义ref属性，且唯一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// 父组件用子组件属性
// 子类
class ButtonComment extends Component {
	constructor () {
		super();
		this.sendSword = this.sendSword.bind(this);
		this.state = {count: 0 };
	}
    sendSword () {
    //这里用回调，setState之后再调用父类的方法进行设置
        this.setState({count:this.state.count + 10}, () => {
            // debugger;
            
            console.log('this.state.count',this.state.count);
            this.props.getSwordCount2();  //子类调用父类方法的正确写法
            // this.props.getSwordCount2;  //这种写法不会调用的
            // this.props.getSwordCount();  //这种写法会报错的
        }); 
    }
    render () {
       return (
            <button onClick={this.sendSword}>{this.props.buttonName}</button>
       );
    }
};
class ImDaddyComponent extends Component { 
	constructor () {
		super();
		this.sendSwordParent = this.sendSwordParent.bind(this);
		this.getSwordCount = this.getSwordCount.bind(this);
		this.state = {sendCount: 0 };
	}
    sendSwordParent () {
    // 父类调用子类的方法
        this.refs.getSwordButton.sendSword();
        console.log(' this.refs.getSwordButton', this.refs.getSwordButton);
    } 
    getSwordCount () {
        //通过  this.refs.getSwordButton 获取 子类对象 加完之后将加完的结果通知给子类，即，将结果通过 this.refs.getSwordButton 给子类的state.count 设置
        this.setState({sendCount: this.refs.getSwordButton.state.count + 1}, () => {
            
            this.refs.getSwordButton.setState({
                count: this.refs.getSwordButton.state.count + 1
            });
        });
    }
    render () {
        return (
            <div>
                <ButtonComment ref="getSwordButton" getSwordCount2={this.getSwordCount} buttonName="儿子送宝刀"/>
                <button onClick={this.sendSwordParent}>通过老爸送宝刀</button>
                <p style={{fontSize: '20px'}}>
                    父子俩共送{this.state.sendCount}把宝刀！！！
                </p>
            </div>
        );
    };
};
ReactDOM.render(
        <ImDaddyComponent />,
        document.getElementById('app')
);

【总结】

  • 1.子类调用父类方法时，this.props.getSwordCount2()，其中getSwordCount2为父类的属性，调用它要加()，

    1
    2
    this.props.getSwordCount2;  //这种写法不会调用的
    this.props.getSwordCount();  //这种写法会报错的

  • 2.父类调用子类方法时

    通过 this.refs.getSwordButton 获取子类，然后.sendSword()，其中sendSword()为子类的方法

  • 3.回调的运用

    想子类setSate之后再通过父类改变状态，

    `this.setState({}, () => {
   调用父类方法
});`

  • 4.通知子类

    父类改变状态之后，重新找到子类，给子类 setSate,

发表于

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment