react--数据传递

数据传递的流向：1、数据从父组件传递到子组件，2、数据从子组件传递到父组件，3、多个组件共享状态数据。

数据传递的方式：1、实例属性 props，2、函数，3、状态提升

当然，context 也可以实现组件间的数据传递，官网对其的描述为： “使用React可以非常轻松地追踪通过React组件的数据流，在有些场景中，你不想要向下每层都手动地传递你需要的 props. 这就需要强大的 context API了”。但是同样也提到：“绝大多数应用程序不需要使用 context，如果你想让你的应用更稳定，别使用context。因为这是一个实验性的API，在未来的React版本中可能会被更改”。具体使用方法可到官网查看。本文提供代码和注释以及运行的结果图，具体的代码说明可查看注释。

数据从父组件到子组件

数据由父组件传递到子组件相对简单，一般的处理方法是，在父组件中定义、获取需要传递的数据，在父组件页面中通过 <子组件名称  props属性名称 = {传递的数据} />  传递，最后在子组件中使用 this.props.props对应的属性名称  即可接受父组件传递过来的数据。

一、将数据从父组件传递到子组件，数据传递过程中，注意父组件和子组件中各自属性的名称要对应

父组件代码：

var React = require('react');
var ReactDOM = require('react-dom');
import BodyChild from './components/indexchild';

class Index extends React.Component {

    constructor() {
        //调用基类的所有的初始化方法
        super();

        // 设置当前组件的属性
        this.state = {
            username: "Guang",
            age: 20
        };
    };

    parentFunc(){
        alert("我是父组件中的 parentFunc 函数");
    }

    render() {
        return (
            <div>
                <h3>父组件</h3>

                {/* 显示当前组件的属性作为对照 */}
                <p>age_parent: {this.state.age}</p>
                <p>username: {this.state.username}</p>

                <BodyChild
                            //将当前组件的 state.xxx 属性传递给 子组件的 props.xxx_child
                            age_child={this.state.age}
                            username_child={this.state.username}
                            // 将 父组件的函数 this.parentFunc 传递给子组件 props.childFunc
                            childFunc={this.parentFunc.bind(this)}
                />
            </div>
        );
    }
}

ReactDOM.render(
    <Index/>, document.getElementById('example'));

子组件代码：

import React from 'react';

export default class BodyChild extends React.Component{

  constructor(props){
    // React组件的构造函数将会在装配之前被调用。当为一个React.Component子类定义构造函数时，
    // 你应该在任何其他的表达式之前调用super(props)。否则，this.props在构造函数中将是未定义，并可能引发异常
    super(props);

    // 父组件传递过来的属性存储在 props.username_child 中，将其赋值给当前组件的 state.username_child
    this.state={username_child:props.username_child}
  }

  render(){
    return(
      <div>
        <h3>子组件</h3>

        {/* 父组件传递过来的属性存储在 props.age_child 中，获取并显示属性的值 */}
        <p>age_child(通过 props 获得): {this.props.age_child}</p>

        {/* 获取并显示 state.username_child,该属性的值是从父组件中获取的 */}
        <p>username_child(通过 props 赋值给 state 获得): {this.state.username_child}</p>

        {/* 这里获取并执行父组件传递过来的函数 */}
        {this.props.childFunc()}
      </div>
    )
  }
}

二、将数据从父组件传递到子组件，若有多个数据要传递，如1000个，可一次性传递，参数传递过程时，注意父组件和子组件中各自属性的名称，与前面代码相比，下列代码对应属性名称有所改变（父组件中的 state.xxx  在子组件中获取的形式为 props.xxx）

父组件代码:

var React = require('react');
var ReactDOM = require('react-dom');
import BodyChild from './components/indexchild';

class Index extends React.Component {

    constructor() {
        //调用基类的所有的初始化方法
        super();

        // 设置当前组件的属性
        this.state = {
            username: "Guang",
            age: 20
        };
    };

    render() {
        return (
            <div>
                <h3>子组件</h3>

                {/* 显示当前组件的属性作为对照 */}
                <p>age_parent: {this.state.age}</p>
                <p>username: {this.state.username}</p>

                {/* 一次性传递当期组件的所有 state 中的属性传给子组件 同理：传递 props 可使用 {...this.props} */}
                <BodyChild{...this.state}/>

            </div>
        );
    }
}

ReactDOM.render(
    <Index/>, document.getElementById('example'));

子组件代码:

import React from 'react';

export default class BodyChild extends React.Component{

  constructor(props){
    // React组件的构造函数将会在装配之前被调用。当为一个React.Component子类定义构造函数时，
    // 你应该在任何其他的表达式之前调用super(props)。否则，this.props在构造函数中将是未定义，并可能引发异常
    super(props);

    // 父组件传递过来的属性存储在 props.username 中，将其赋值给当前组件的 state.username_child
    this.state={username_child:props.username}
  }

  render(){
    return(
      <div>
        <h3>子组件</h3>

        {/* 父组件传递过来的属性存储在 props.age 中，获取并显示属性的值 */}
        <p>age_child(一次性传递，通过 props 获得): {this.props.age}</p>

        {/* 获取并显示 state.username_child,该属性的值是从父组件中获取的 */}
        <p>username_child(一次性传递，通过 props 赋值给 state 获得): {this.state.username_child}</p>

      </div>
    )
  }
}

说完了数据从父组件到子组件的传递，接下来是数据从子组件到父组件，与前者相比，后者的相对复杂，其传递方式一般为：在子组件中通过调用父组件传递过来的事件函数进行数据的传递 ，即

　　1、首先在父组件中定义一个函数(用于数据的传递，里面处理获取的各项数据)

　　2、将函数通过 “数据从父组件传递到子组件” 的方式将函数传递到子组件

　　3、在子组件中通过事件绑定或着直接调用的方式执行函数(执行时可以传入数据、事件等)，最终实现数据的传递

数据从子组件到父组件

1：直接传递数据

父组件代码：

var React = require('react');
var ReactDOM = require('react-dom');
import BodyChild from './components/indexchild';
class Index extends React.Component {
    constructor() {
        super(); //调用基类的所有的初始化方法
        this.state = {
            username: "Tom",
            age: 20,
            child_data:"子组件的输入在此显示",
        }; //初始化赋值
    };

    parentGetData(child_username,child_age){
        this.setState({child_username:child_username,child_age:child_age});
        // console.log(child_username,child_age);
    }

    render() {
        return (
            <div>
                <h3>子组件的信息 用户名为：Guang Zai 年龄为：18 开始时为空，点击按钮可获取</h3>
                <p>子组件用户名:{this.state.child_username}</p>
                <p>子组件年龄:{this.state.child_age}</p>
                <BodyChild childGetData={(n1,n2)=>this.parentGetData(n1,n2)}/>
            </div>
        );
    }
}
ReactDOM.render(
    <Index/>, document.getElementById('example'));

子组件代码：

import React from 'react';

export default class BodyChild extends React.Component{

  constructor(props){
    // React组件的构造函数将会在装配之前被调用。当为一个React.Component子类定义构造函数时，
    // 你应该在任何其他的表达式之前调用super(props)。否则，this.props在构造函数中将是未定义，并可能引发异常
    super(props);
    this.state={
      username:"Guang Zai",
      age:18
    }
  }
  render(){
    return(
      <div>
          <p>子组件按钮：<input type="button" value="点击获取子组件信息" onClick={()=>this.props.childGetData(this.state.username,this.state.age)}></input></p>
      </div>
    )
  }
}

2：通过事件传递数据

父组件代码：

var React = require('react');
var ReactDOM = require('react-dom');
import BodyChild from './components/indexchild';
class Index extends React.Component {
    constructor() {
        super(); //调用基类的所有的初始化方法
        this.state={child_data:"此处实时显示子组件输入的信息"}

        // 初始化时 函数 this 使用 bind 绑定当前类
        this.parentPageInputBind=this.parentPageInputBind.bind(this);
    };

    parentPageInputBind(e){
        this.setState({child_data:e.target.value});
    };

    render() {
        return (
            <div>
                <h3>子组件实时输入的信息</h3>
                <p>实时输入的信息：{this.state.child_data}</p>
                <BodyChild childPageInputBind={this.parentPageInputBind}/>
            </div>
        );
    }
}
ReactDOM.render(
    <Index/>, document.getElementById('example'));

子组件代码：

import React from 'react';

export default class BodyChild extends React.Component{
  render(){
    return(
      <div>
          <p>子组件输入：<input type="text" onChange={this.props.childPageInputBind}></input></p>
      </div>
    )
  }
}

多个组件共享状态数据

综合上述参数的双向传递，通过将多个子组件输入的数据传递到同一个父组件，然后将该父组件中处理好的数据传递回给需要的子组件，实现数据间的共享

import React from 'react';

class LettersInput extends React.Component{
  constructor(props){
    super(props);
  }
  handleChange(e){
    this.props.onLettersChange(e);
  }
  render(){
    const letters=this.props.letters;
    return(
      <div>
        <input value={letters} onChange={(e)=>this.handleChange(e)}></input>
      </div>
    )
  }
}

class AppComponent extends React.Component {
  constructor(props){
    super(props);
    this.state={letters:''};
    this.handleChange=this.handleChange.bind(this);
  }

  handleChange(e){
    const letters=e.target.value;
    const last=letters.substr(letters.length-1,1);
    if(/[^a-z]/i.test(last)){
      return '';
    }
    this.setState({letters:letters});
  }

  render(){
    const letters=this.state.letters;
    return(
      <div>
        <span>lower case letter:</span><LettersInput letters={letters.toLowerCase()} onLettersChange={this.handleChange}/>
        <span>upper case letter:</span><LettersInput letters={letters.toUpperCase()} onLettersChange={this.handleChange}/>
      </div>
    )
  }

}

AppComponent.defaultProps = {
};

export default AppComponent;