关于react父子间传值和兄弟间传值

兄弟间传值

如何建立一个react项目这里不再讲述。

在这里，.jsx和.js文件用法基本一致。

直接在一个App.jsx文件引入Father.jsx

import React, {Component} from 'react'
//	父子传值
import Father from './父子间传值/Father.js'
//	非父子间传值，通过发布/订阅
import One from './非父子间传值/One.js'
import Two from './非父子间传值/Two.js'
export default class App extends Component{
//	非父子间传值，通过子传父，父传子
	render(){
		return (
			<div>
				<One></One>
				<Two></Two>
			</div>
		)
	}
//	父子传值的render
//	render(){
//		return (
//			<div>
//				<Father/>
//			</div>
//		)
//	}
}	

one传值给two

首先one的代码

import React from 'react'
//引入发布/订阅插件
import PubSub from 'pubsub-js'

export default class Areact extends React.Component{
	constructor(){
		super()
		this.state = {
			data:''
		}
	}
	render(){
		return (
			<div>
			<p>One发送的消息:{this.state.data}</p>
			<input ref='inp' type='text'/>
			<button onClick={()=>{
				let inp = this.refs.inp;
				this.setState({data:inp.value})
//				直接发布
				PubSub.publish('one-data',inp.value);
			}}>One发送</button>
			</div>
		)
	}
}

 然后是two的代码

import React from 'react'
//引入发布/订阅插件
import PubSub from 'pubsub-js'

export default class Breact extends React.Component{
	constructor(){
		super()
		this.state = {
			data:''
		}
	}
	render(){
		return (
			<div>
			<hr/>
			<p>接收One的消息:{this.state.data}</p>
			
			</div>
		)
	}
	componentDidMount(){
//		订阅下来,赋给token是因为结束时能够找到当前实例
		this.token = PubSub.subscribe('one-data',(paramsOne,value)=>{
			this.setState({data:value})
		});
	}
	componentWillUnmount(){
//		在该模块结束时,关闭发布订阅实例
		PubSub.unsubscribe(this.token);
	}
}

父子间传值

Father的代码

import React from 'react'
import Son from './Son.js'

export default class Father extends React.Component{
	constructor(){
		super()
		this.state = {
			msg:'',
			remsg:''
		}
	}
	render(){
		return (
			<div>
			<p>父亲发送的消息:{this.state.msg}</p>
			<p>接收儿子的消息:{this.state.remsg}</p>
			<input ref='inp' type='text'/>
			{/*vue和react的ref区别:refs调用不需要$ */}
			<button onClick={()=>{
//				首先获取输入框的值，然后传到state的msg，然后通过Son标签属性传值方式传给子组件
				let inp = this.refs.inp;
				this.setState({msg:inp.value})
			}}>父亲发送</button>
			<Son data={this.state.msg} handle={this.receiveSon.bind(this)}/>
			</div>
		)
	}
	receiveSon(val){
//		收到子组件传来的值,进行渲染到state
		this.setState({remsg:val})
	}
}

son的代码

import React from 'react'

export default class Son extends React.Component{
	constructor(){
		super()
		this.state = {
			inpVal:''
		}
	}
	render(){
		return (
			<div>
			<hr/>
			<p>儿子发送的消息:{this.state.inpVal}</p>
			<p>接收父亲的消息:{this.props.data}</p>
			<input type='text' ref='inp'/>
			<button onClick={()=>{
//				获取输入框的值,然后传到state,然后通过props传到父组件
				let inp = this.refs.inp;
				this.setState({inpVal:inp.value})
				this.props.handle(inp.value)
			}}>儿子发送</button>
			</div>
		)
	}

}

文件路径