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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。