React advanced tutorial react in the context

Summary: In react, the data can be streamed from top to bottom, and whenever you use a component, you can see that the props property of the component is passed from top to bottom. However, in some cases, we do not want to pass through the parent component's props property one level down, and we want to get the value in the props of the parent component of the upper n level directly in a sub-component.

1. In general, through the props of the value of the situation

Class Button extends React.component {
  render () {
    return (
      <button Style={{background:this.props.color }}>
        {This.props.children}
      </button>
    );
  }
}

Class Message extends React.component {
  render () {
    return (
      <div>
        {This.props.text} < Button color={this.props.color}>delete</button>
      </div>
    )}
}

Class Messagelist extends React.component {
  render () {
    const color = "Purple";
    Const CHILDREN = This.props.messages.map ((message) = =
      <message text={message.text} color={color}/>
    );
    Return <div>{children}</div>;
  }
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

Let's analyze this code and the approximate components are divided into 3 levels:

Top level Messagelists-->message sub-class-->button bottom Subclass

Let's look at the delivery of the values from the parent component to the child component:

(1) Text:

We can see that the value in the top-level component messagelists is passed to the first-level subcomponent in message and is used in this component.

(2) Color:

Then look at the transfer of color in the props, the value in the top-level component messagelists, first passed to the first-level subassembly message,

is passed to level two sub-component button and is finally used in level two subcomponents.

All in all: This is the general in react, used by the props property, in the parent component and the child component to pass the value.

2. How to use the context in react to carry out the value of the Leapfrog pass.

class Button extends React.component {render () {return (<button Style={{background:this.context.color}
  }> {This.props.children} </button>);

}} button.contexttypes = {color:React.PropTypes.string}; Class Message extends React.component {render () {return (<div> {this.props.text} <BUTTON&G
  T;delete</button> </div>);
  }} class Messagelist extends React.component {getchildcontext () {return {color: ' Purple '};
    } render () {Const CHILDREN = this.props.messages.map (message) = <message Text={message.text}/>
    );
  Return <div>{children}</div>; }} messagelist.childcontexttypes = {color:React.PropTypes.string}; 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

The above code, we realized the value of--color through the context of the react to achieve the leapfrog transfer. Let's analyze the above method.

(1) First in the top-level assembly:

Messagelist.childcontexttypes = {
  color:React.PropTypes.string
};

1 2 3

Defines the subclass context object owned by the top-level component, which has a subclass context object of color and must be a string.

The Getchildtext method is then used to assign values to the properties of the sub-context object:

Getchildcontext () {

    return {color: ' Purple '};
  }

1 2 3) 4 5

This completes the assignment of the context object in the top-level assembly.

(2) Skip pass, because the color attribute is only used at the lowest level

Let's look at the skip pass of the color property, because the color property is not used directly in the first-level subcomponent message, so we can

Pass directly to the bottom (leapfrog), used in the button component.

First, in the button component, the type of child component color of the received context is declared again, and the declaration must be a string:

Button.contexttypes = {
  color:React.PropTypes.string
};

1 2 3

You can then call this way by This.context.color:

<button style={{background:this.context.color}}>
        {this.props.children}
 </button>

1 2 3

In this way, we find that through the context, we can achieve the worth of leapfrog Pass.