组件通信：(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;//抛出父组件

React（二）组件通信

组件通信：(react版本是15版本，可能和16版本的操作有部分差异)

父子组件：

父=>子

子=>父：

简单的兄弟组件（非redux、flux）

模拟事件总线通信：（react-16版的组件共用事件总线传参）

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

React（二）组件通信

组件通信：(react版本是15版本，可能和16版本的操作有部分差异)

父子组件：

父=>子

子=>父：

简单的兄弟组件（非redux、flux）

模拟事件总线通信：（react-16版的组件共用事件总线传参）

热门文章

最新文章

相关课程

相关电子书