React学习08_组件间的传值与this的绑定
父子传值
- 父组件在使用子组件时,给它的属性传入想给它的数据
- 子组件通过 this.props.属性名 可以获取该数据
子向父传值
- 父组件向子组件传入一个带参数的方法
- 子组件通过向这个方法传入自己的数据,在父组件触发该方法,父组件通过
this.setState
来修改父组件的值并渲染从而实现子向父传值
bind(this,…args)
该方法主要是把当前实例绑定到方法目标方法中
如下面的代码:
父组件
import React, { Component } from 'react';
import News from './New'
import Phone from './phone'
export default class componentName extends Component {
constructor(props){
super(props)
this.state={
text:"我是默认值"
}
}
dataFun=(text)=>{
this.setState({
text
})
}
render() {
return (
<div>
<News fufun={this.dataFun}/>
</div>
);
}
}
子组件
import React, { Component } from 'react';
import PubSub from 'pubsub-js'
export default class componentName extends Component {
constructor(props) {
super(props)
this.state = {
ziText: "我是子组件的数据"
}
}
render() {
return (
<div>
<button onClick={this.props.fufun.bind(this,this.state.ziText)}>点我进行数据的发送</button>
</div>
);
}
}
- 子组件的第一个参数this,表示将该方法的this指向自己(而不是父组件的this)
- 第二个参数就是上传的值
兄弟间传值
- npm i pubsub-js --save,该插件如同放置一个全局的map
- 导包 import PubSub from 'pubsub-js’
兄弟1 组件
pubsub(){
PubSub.publish('evt',this.state.num)
}
<button onClick={this.pubsub.bind(this)}>点我进行同级传值</button>
兄弟2组件
导包,然后就可以使用了
PubSub.subscribe("evt",(msg,data)=>{
console.log("phone"+data)
})