React（二）组件通信
本文最后更新于：1 个月前
组件通信：(react版本是15版本，可能和16版本的操作有部分差异)
父子组件：
父=>子
用props：
通过ref进行标记
1.用props
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Life</title>
<script src="../react.min.js"></script>
<script src="../react-dom.min.js"></script>
<script src="../browser.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: lightgreen;
}
.yes{
background: lightblue;
}
.no{
background: lightcoral;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var Father = React.createClass({
getInitialState(){
return{
isTrue:'Hello'
}
},
render() {
return (
<li>{/*组件传参，用bind绑定this，以取到this.state.isTrue，
将this.state.isTrue作为属性传到子组件中
*/}
<div onClick={this.clickHandler.bind(this,this.state.isTrue)}></div>
<Son name={this.state.isTrue}/>
</li>
);
},
clickHandler(a){
// 将state的值改变，使Hello取World，World取Hello
this.setState({isTrue:this.state.isTrue=='Hello'?'World':'Hello'});
}
});
var Son = React.createClass({
render() {//取到父组件的值，修改颜色
return (
<div className={this.props.name==='Hello'?'yes':'no'}>{this.props.name}</div>
);
}
});
ReactDOM.render(<Father/>,app);
</script>
</body>
</html>2.ref标记：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Life</title>
<script src="../react.min.js"></script>
<script src="../react-dom.min.js"></script>
<script src="../browser.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: lightgreen;
}
.yes{
background: lightblue;
}
.no{
background: lightcoral;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var Father = React.createClass({
init(){
this.self.clickHandler()//执行子组件的方法
},
render() {
return (
<li>
<div onClick={this.init}></div>
<Son ref={(el)=> this.self=el}/>{/*绑定一个标记绑定在自己身上，使this.self等于子组件，于是调用this.self以达到调用子组件的方法*/}
</li>
);
}
});
var Son = React.createClass({
getInitialState(){
return{
str:'Hello'
}
},
render() {
return (
<div className={this.state.str==='Hello'?'yes':'no'}>{this.state.str}</div>
);
},
clickHandler(){
// 将state的值改变，使Hello取World，World取Hello，该方法被父组件调用
this.setState({str:this.state.str=='Hello'?'World':'Hello'});
}
});
ReactDOM.render(<Father/>,app);
</script>
</body>
</html>子=>父：
通过子组件调用父组件的函数传递信息
下面是个简单的小例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>s_f</title>
<script src="../react.min.js"></script>
<script src="../react-dom.min.js"></script>
<script src="../browser.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: lightgreen;
}
.yes {
background: lightblue;
}
.no {
background: lightcoral;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var Father = React.createClass({
getInitialState() {
return {
str: "Hello"
};
},
render() {
return (
<li>{/*父组件添加点击事件改变自身颜色和数据，并将自己的函数和state附在子组件的属性上*/}
<div className={this.state.str==='Hello'?'yes':'no'} onClick={this.clickHandler}>{this.state.str}</div>
<Son Fn={this.clickHandler} str={this.state.str} />
</li>
);
},
clickHandler() {//点击事件，单击时将world换成hello，hello换成world
this.setState({ str: this.state.str == "Hello" ? "World" : "Hello" });
}
});
var Son = React.createClass({
render() {
return ({/*子组件中将调用父组件传过来的函数及数据，并修改自身样式，达到子组件修改父组件的方法，从而父组件变化，子组件也变化，子组件变化，父组件也变化*/}
<div className={this.props.str==='Hello'?'no':'yes'} onClick={this.props.Fn}>{this.props.str}
</div>
);
}
});
ReactDOM.render(<Father/>, app);
</script>
</body>
</html>简单的兄弟组件（非redux、flux）
将以上两种结合即可，子传父，父传子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>s_s</title>
<script src="../react.min.js"></script>
<script src="../react-dom.min.js"></script>
<script src="../browser.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: lightgreen;
}
.yes {
background: lightblue;
}
.no {
background: lightcoral;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var Father = React.createClass({
getInitialState() {
return {
str: "Hello"
};
},
render() {
return (
<li>{/*父组件添加点击事件改变自身颜色和数据，并将自己的函数和state附在子组件的属性上*/}
<div>{this.state.str}</div>
<Son Fn={this.clickHandler}/>{/*Son组件触发父组件的事件*/}
<Son1 str={this.state.str}/>{/*父组件将数据更新传给Son1组件*/}
</li>
);
},
clickHandler() {//点击事件，单击时将world换成hello，hello换成world
this.setState({ str: this.state.str == "Hello" ? "World" : "Hello" });
}
});
var Son = React.createClass({
render() {//Son触发事件改变数据
return (
<div onClick={this.props.Fn}>Son
</div>
);
}
});
var Son1 = React.createClass({
render() {//Son1对传来的数据进行改变
return (
<div className={this.props.str==='Hello'?'no':'yes'}>Son1
</div>
);
}
});
ReactDOM.render(<Father/>, app);
</script>
</body>
</html>模拟事件总线通信：（react-16版的组件共用事件总线传参）
在装好react-cli后，新建一个文件bus：（将Event事件总线布置在全局）
import {EventEmitter} from 'events'
const bus=EventEmitter.prototype
export default bus然后在兄弟组件中分别引入：（当做全局变量）
import bus from '../../../module/bus.js'以下是两个兄弟组件：
import React from 'react'
import bus from '../../../module/bus.js'
class Son extends React.Component{
constructor(props){
super(props)
this.state={//设置当前state
isTrue:false
}
}
componentWillMount(){//将事件注册在bus事件总线上
bus.on('change',()=>{
console.log(
this.state.isTrue
);
this.setState({isTrue:!this.state.isTrue})
})
}
render(){
return(
<div>
{this.state.isTrue}
</div>
)
}
}
export default Son//抛出组件import React from 'react'
import bus from '../../../module/bus.js'
class Son1 extends React.Component{
constructor(props){
super(props)
console.log('------')
}
changeSon(){
bus.emit('change')//触发全局事件，使上面的兄弟触发方法
}
render(){
return(
<div>
<button onClick={this.changeSon}>变色</button>//触发点击事件
</div>
)
}
}
export default Son1//抛出组件在父组件中注册子元素：
import React from 'react'
import Son1 from './father'
import Son from './son';
class Bus extends React.Component{
constructor(props){
super(props)
console.log('------')
}
render() {
return(
<div>
<p>Event</p>
<Son1></Son1>//将两个组件注册
<Son></Son>
</div>
)
}
}
export default Bus;//抛出父组件本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！