• React组件简单介绍


    组件是 React 的核心,因此了解如何利用它们对于创建优秀的设计结构至关重要。

    组件之间传递信息方式:

    1.(父组件)向(子组件)传递信息

    2.(子组件)向(父组件)传递信息

    3.没有任何嵌套关系的组件之间传值(比如:兄弟组件之间传值)

    下面结合实例详细说明种传递信息的方式。

    以下的例子是我的个人见解,希望对你们有所帮助。

    一、(父组件)向(子组件)传递信息>>>主要是通过prop进行

    来看下面例子

    //父组件
    var MyContainer = React.createClass({
      getInitialState: function () {
        return {
          checked: false
        };
      },
      render: function() {
        return (
          <ToggleButton text="Toggle me" checked={this.state.checked} />
        );
      }
    });
     
    // 子组件
    var ToggleButton = React.createClass({
      render: function () {
        // 从(父组件)获取的值
        var checked = this.props.checked,
            text = this.props.text;
     
        return (
            <label>{text}: <input type="checkbox" checked={checked} /></label>
        );
      }
    });
    

     以上这个例子,子组件通过 prop拿到了text值以及checked的属性值;那么当子组件要拿到祖父级组件的信息,也是可以通过prop进行逐层的获取。

     二、(子组件)向(父组件)传递信息

    // 父组件
    var MyContainer = React.createClass({
      getInitialState: function () {
        return {
          checked: false
        };
      },
      onChildChanged: function (newState) {
        this.setState({
          checked: newState
        });
      },
      render: function() {
        var isChecked = this.state.checked ? 'yes' : 'no';
        return (
          <div>
            <div>Are you checked: {isChecked}</div>
            <ToggleButton text="Toggle me"
              initialChecked={this.state.checked}
              callbackParent={this.onChildChanged}
              />
          </div>
        );
      }
    });
     
    // 子组件
    var ToggleButton = React.createClass({
      getInitialState: function () {
        return {
          checked: this.props.initialChecked
        };
      },
      onTextChange: function () {
        var newState = !this.state.checked;
        this.setState({
          checked: newState
        });
     
        //这里将子组件的信息传递给了父组件
        this.props.callbackParent(newState);
      },
      render: function () {
        // 从(父组件)获取的值
        var text = this.props.text;
        // 组件自身的状态数据
        var checked = this.state.checked;
    		//onchange 事件用于单选框与复选框改变后触发的事件。
        return (
            <label>{text}: <input type="checkbox" checked={checked}     onChange={this.onTextChange} /></label>
        );
      }
    });
    

      以上例子中,在父组件绑定callbackParent={this.onChildChanged},在子组件利用this.props.callbackParent(newState),触发了父级的的this.onChildChanged方法,进而将子组件的数据(newState)传递到了父组件。
    这样做其实是依赖 props 来传递事件的引用,并通过回调的方式来实现的。

     三、没有任何嵌套关系的组件之间传值(比如:兄弟组件之间传值)

    // 兄弟相传
    //1.引入React模块
    import React from 'react';
    import Son1  from './Son1';
    import Son2  from './Son2';
    //2.声明类,要继承React.Component
    class Father extends React.Component{
       constructor(){
           super();
           this.state={
               message:""
           }
       }
    // 这个函数用来接收Son1.js组件的数据函数
    Son1data(msg){
         this.setState({
             message:msg,
         })
    }
     //3.重写渲染方法
        render(){
            return(
                <React.Fragment>
        <Son1 Son1data={this.Son1data.bind(this)} ></Son1>
        <Son2 mess={this.state.message}></Son2>
                </React.Fragment>
            )
        }
    }
    //4.向外暴露
    export default Father;
    //子组件1的js代码
    //1.引入React模块
    import React from 'react'; 
    // Son1子组件
    //2.声明类,要继承React.Component
    class Son1 extends React.Component{
        //按钮点击事件函数
        Son1click(){
            this.props.Son1data('这是从Son.js中生成的数据');
        }
         //3.重写渲染方法
        render(){
            return(
               <React.Fragment>
              <button onClick={this.Son1click.bind(this)}>Son1.js数组中获取的数据</button>
               </React.Fragment> 
            )
        }
    }
    //4.向外暴露
    export default Son1;
    //子组件2的js代码
    //1.引入React模块
    import React from 'react';
    //2.声明类,要继承React.Component
    class Son2 extends React.Component{
         //3.重写渲染方法
        render(){
            return(
                <React.Fragment>
                    {this.props.mess}
        {console.log(this.props.mess)}
                </React.Fragment>
            )
        }
    }
    //4.向外暴露
    export default Son2;

     props都有什么用

    1.1.props属性

    1. 先在组件上通过自定义属性赋值。
    2. 函数组件中,在函数上定义形参props,在函数中 props.属性名。
    3. 类组件中,通过 this.props.属性名。

    1.2.props的作用

    • 用于组件之间传值。

    1.3.props的特点

    • 只读,值不能被修改。

     

    总结 

    1.父组件通过state向子组件传值,子组件通过props获取父组件所传的值。 

    2.子组件通过prop获取父组件中定义的函数方法,但是需要在父组件调用子组件的标签中写明。 

    3.父组件通过refs调用子组件中声明的方法,但是需要给子组件添加一个ref节点 

    4.组件之间的交流也不一定要沉在这些直接性的关联的东西,我们的思维还可以提神一个高度,可以在action-reduce中搞定。



     

  • 相关阅读:
    强连通分量
    mysql安装图解 mysql图文安装教程(详细说明)
    MeshCombineUtility.cs method `GetTriangleStrip' of type `UnityEngine.Mesh' could be found
    socket网络编程之一:客户端和服务器端接口函数
    unity3D——登录界面
    Ionic学习注意事项01
    这里我将分享我学到的几种ionic登陆界面
    关于ionic基础教程的学习网址
    Windows下配置Git
    Cocos网络篇[3.2](3) ——Socket连接(1)
  • 原文地址:https://www.cnblogs.com/zouhuixiang/p/12075996.html
Copyright © 2020-2023  润新知