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

关于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 = fs.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是因为结束时能够找到当前实例ken = PubSub.subscribe('one-data',(paramsOne,value)=>{this.setState({data:value})});}componentWillUnmount(){
//		在该模块结束时,关闭发布订阅实例PubSub.ken);}
}

父子间传值

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>接收儿子的消息:{sg}</p><input ref='inp' type='text'/>{/*vue和react的ref区别:refs调用不需要$ */}<button onClick={()=>{
//				首先获取输入框的值，然后传到state的msg，然后通过Son标签属性传值方式传给子组件let inp = fs.inp;this.setState({msg:inp.value})}}>父亲发送</button><Son data={this.state.msg} handle={iveSon.bind(this)}/></div>)}receiveSon(val){
//		收到子组件传来的值,进行渲染到statethis.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 = fs.inp;this.setState({inpVal:inp.value})this.props.handle(inp.value)}}>儿子发送</button></div>)}}

文件路径