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'));



複製程式碼