zoukankan      html  css  js  c++  java
  • 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中搞定。



     

  • 相关阅读:
    Python学习札记(十五) 高级特性1 切片
    LeetCode Longest Substring Without Repeating Characters
    Python学习札记(十四) Function4 递归函数 & Hanoi Tower
    single number和变体
    tusen 刷题
    实验室网站
    leetcode 76. Minimum Window Substring
    leetcode 4. Median of Two Sorted Arrays
    leetcode 200. Number of Islands 、694 Number of Distinct Islands 、695. Max Area of Island 、130. Surrounded Regions 、434. Number of Islands II(lintcode) 并查集 、178. Graph Valid Tree(lintcode)
    刷题注意事项
  • 原文地址:https://www.cnblogs.com/zouhuixiang/p/12075996.html
Copyright © 2011-2022 走看看