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中搞定。