React二组件通信

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

父子组件:

父=>子

  1. 用props:
  2. 通过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 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...