props-type context

传统的父子组件传值 ： 这样要一层一层往下传，会带来诸多不便

import React from 'react';
import ReactDOM from 'react-dom';

//一般的父子组件传值 会是从上往下一个套一个都带上参数
//比如改变颜色，比如渲染messages
//这样子真的很麻烦，所以用context来改变这样的传值方式，用'prop-type'
class Container extends React.Component{
    render(){
        return(
            <MessageList messages={this.props.messages} color={color}/>
        )
    }
}
class MessageList extends React.Component{
    render(){
        return(
            <ul>
                {
                    this.props.messages.map((message,index)=><Message color={color} key={index} message={message}/>)
                }
            </ul>
        )
    }
}
class Message extends React.Component{
    render(){
        return(
            <li style={{color:this.props.color}}>{this.props.message}</li>
        )
    }
}

let messages = [1,2,3];
let color = 'blue';
ReactDOM.render(
    <Container messages={messages} color={color}></Container>,
    document.querySelector('#root'));

使用props-type
context直接在父组件定义，子组件随用随调

import React from 'react';
import ReactDOM from 'react-dom';
import {PropTypes} from 'prop-types';

//getChildContext
//childContextTypes
//Props.String 
//用这个不稳定，因为可能会被覆盖？可能你不知道在哪传来的？

class Container extends React.Component{
    getChildContext(){
        //返回context对象，并指定返回对象类型
        //使用了这个以后，所有的Container的子组件都会有这样的一个context对象
        return {color:'red'};
    }
    render(){
        return(
            <MessageList messages={this.props.messages}/>
        )
    }
}
//
Container.childContextTypes = {
    color:PropTypes.string
}
class MessageList extends React.Component{
    render(){
        return(
            <ul>
                {
                    this.props.messages.map((message,index)=><Message message={message}/>)
                }
            </ul>
        )
    }
}
class Message extends React.Component{
    render(){
        return(
            <li style={{color:this.context.color}}>{this.props.message}</li>
        )
    }
}
Message.childContextTypes = {
    color:PropTypes.string
}

let messages = [1,2,3];
let color = 'blue';
ReactDOM.render(
    <Container messages={messages} color={color}></Container>,
    document.querySelector('#root'));