react入门之-------组件传值代码解析

其他 2018-07-28 21:34:47 阅读次数: 0

react入门之——-组件传值

react的组件传值方式有父传子，子传父，非父子

首先是组件传值有两种方法

1、函数式组件传值
2、类组件传值

一、父传子–简化版
1、函数式组件传值

  <!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8" />
            <title>Hello World</title>
            <!--react的核心库-->
            <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

            <!--react的与dom相关的一些功能-->
            <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

            <!--将浏览器不支持的jsx语法转化为js语法-->
            <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
        </head>

        <body>
            <div id="root" class="parent">

            </div>



        </body>

    </html>
    <script type="text/babel">

        // 创建一个函数组件  ---- 使用props完成值得接收
        function Child(props){
            return (
                <div>
                    <ul>
                        <li>{props.name}</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </div>
            )
        }


        ReactDOM.render(
            // 渲染组件  并通过name属性完成传值
            <Child name="3"></Child>, 
            document.getElementById('root') 
        );

    </script>

2、类组件传值


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
        </body>
    </html>
    <!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8" />
            <title>Hello World</title>
            <!--react的核心库-->
            <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

            <!--react的与dom相关的一些功能-->
            <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

            <!--将浏览器不支持的jsx语法转化为js语法-->
            <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
        </head>

        <body>
            <div id="root"></div>



        </body>

    </html>
    <script type="text/babel">

        // 创建一个类组件
        class Child extends React.Component{
            render(){
                return (
                    <div>
                        <ul>
                            <li>{this.props.name}</li>
                            <li>2</li>
                            <li>3</li>
                        </ul>
                    </div>
                )
            }
        }


        ReactDOM.render(
            <Child name="1"></Child>, 
            document.getElementById('root') 
        );

    </script>

详解

  我们调用了 ReactDOM.render() 方法并向其中传入了 <Child name="1" /> 元素。

    React 调用 Child 组件，并向其中传入了 {name: '1'} 作为 props 对象。

    Child 组件返回 <li>1</li>。

    React DOM 迅速更新 DOM ，使其显示为 <li>1</li>。

父传子—-完整版
1、函数式组件传值

 <!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8" />
            <title>Hello World</title>
            <!--react的核心库-->
            <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

            <!--react的与dom相关的一些功能-->
            <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

            <!--将浏览器不支持的jsx语法转化为js语法-->
            <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
        </head>

        <body>
            <div id="root"></div>



        </body>

    </html>
    <!--

        组件：组成的部件,可以接受任何props输入,并返回元素

    -->
    <script type="text/babel">

        // 创建一个父组件 
        function Parent(){
            return (
                <div>
                    <h1>这是父组件</h1>
                    {/*在父组件中嵌套子组件*/}
                    <Child name="1"></Child>
                </div>
            )
        }

        // 创建一个子组件 列表
        function Child(props){
            return (
                <div>
                    <h3>这是子组件</h3>
                    <ul>
                        <li>{props.name}</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </div>
            )
        }

        // 2. 组件的使用
        ReactDOM.render(
            <Parent></Parent>, 
            document.getElementById('root') 
        );

    </script>

2、类组件传值

!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
        </body>
    </html>
    <!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8" />
            <title>Hello World</title>
            <!--react的核心库-->
            <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

            <!--react的与dom相关的一些功能-->
            <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

            <!--将浏览器不支持的jsx语法转化为js语法-->
            <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
        </head>

        <body>
            <div id="root"></div>



        </body>

    </html>
    <script type="text/babel">

        // 创建一个类组件  -- 父
        class Parent extends React.Component{
            render(){
                return (
                    <div>
                        <h1>这是父组件</h1>
                        {/*在父组件中嵌套子组件*/}
                        <Child name="1"></Child>
                    </div>
                )
            }
        }


        // 创建一个类组件  -- 子
        class Child extends React.Component{
            render(){
                return (
                    <div>
                        <h3>这是子组件</h3>
                        <ul>
                            <li>{this.props.name}</li>
                            <li>2</li>
                            <li>3</li>
                        </ul>
                    </div>
                )
            }
        }



        ReactDOM.render(
            <Parent></Parent>, 
            document.getElementById('root') 
        );

    </script>

子传父
1、函数式

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
    </body>

</html>
<script type="text/babel">

    //子组件
    function Child(props){
            return (
                <div>
                    {/*当文本框内容发生变化的时候.会执行父组件里面的事件*/}
                        子组件：<input onChange={props.handleEmail}/>
                </div>
           )
    }

    //父组件
    function Parent() {

        return (
            <div>
                <div id='div'>父组件：{1}</div>
                <Child name="email" handleEmail={
                    function (event){
                        /*获取子组件的数据*/
                        console.log(event.target.value)

                        document.getElementById('div') = event.target.value

                    }
                }/>
            </div>
        )
    }

    ReactDOM.render(
      <Parent />,
      document.getElementById('root')
    );

</script>

2、类方法

扫描二维码关注公众号，回复： 2433205 查看本文章 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
    </body>

</html>
<script type="text/babel">

    //子组件
    class Child extends React.Component{

        render(){
            return (
                <div>
                    {/*当文本框内容发生变化的时候.会执行父组件里面的事件*/}
                        子组件：<input onChange={this.props.handleEmail}/>
                </div>
            )
        }
    }

    //父组件
    class Parent extends React.Component{

        constructor(props){
            super(props)
            this.state = {
                email:''
            }
        }
        handleEmail(event){
            this.setState({email: event.target.value});
        }



        render(){
            return (
                <div>
                    <div>父组件：{this.state.email}</div>
                    <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
                </div>
            )
        }
    }

    ReactDOM.render(
      <Parent />,
      document.getElementById('root')
    );

</script>

非父子，及兄弟元素传值

使用中间人模式 , 定义一个公共的父组件来实现兄弟组件之间的数据传递

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>


    </body>

</html>
<script type="text/babel">


    class Brother1 extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }

      render(){
        return (
          <div>
            <button onClick={this.props.refresh}>
                更新兄弟组件
            </button>
          </div>
        )
      }
    }

    class Brother2 extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }

      render(){
        return (
          <div>
             {this.props.text || "兄弟组件未更新"}
          </div>
        )
      }
    }

    class Parent extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }

      refresh(){
        return (e)=>{
          this.setState({
            text: "兄弟组件沟通成功",
          })
        }
      }

      render(){
        return (
          <div>
            <h2>兄弟组件沟通</h2>
            <Brother1 refresh={this.refresh()}/>
            <Brother2 text={this.state.text}/>
          </div>
        )
      }
    }

    ReactDOM.render(<Parent />, document.getElementById('root'));

</script>

使用jQuery自定事件机制进行非父子传值

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>


        <script src="https://code.jquery.com/jquery.js"></script>

        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>

    </body>

</html>
<script type="text/babel">


    class Com1 extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }

      render(){
        return (
            <div>
                <ul>
                    <li>1</li>
                </ul>
            </div>
        )
      }

      componentDidMount(){
              $('#root').on('bus',function(e,a,b){
                console.log(a,b)
            })
      }
    }

    class Com2 extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }

      render(){
        return (
              <div>
                <ul>
                    <li>1</li>
                </ul>
            </div>
        )
      }

      componentDidMount(){
          $('#root').trigger('bus',[11,22])
      }
    }



    ReactDOM.render(
        <div>
            <Com1></Com1>
            <Com2></Com2>
        </div>,
        document.getElementById('root'));

</script>

等等。。。。。。。。

猜你喜欢

转载自blog.csdn.net/qq_37212162/article/details/80650604
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022