React（二）组件通讯

时间 2019-11-09

标签 react 组件通讯栏目 React 繁體版

原文原文链接

组件通讯：(react版本是15版本，可能和16版本的操做有部分差别)

父子组件：

父=>子

用props：
经过ref进行标记html

1.用propsreact

<!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标记：redux

<!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>

子=>父：

经过子组件调用父组件的函数传递信息babel

下面是个简单的小例子：app

<!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）

将以上两种结合便可，子传父，父传子dom

<!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>