上下问实例子

Author: wcdxhl0117

src/TodoList10/context.js

@@ -22,19 +22,25 @@ class Main extends Component{
 }
 
 class Title extends Component{
+	static contextTypes ={
+		color: PropTypes.string 
+	}
 	render() {
 		 return (
-			 <div>
+			 <div style={{color: this.context.color}}>
 				 这里是标题部分
 			 </div>
 		 )
 	} 
 }
 
 class Content extends Component{
+	static contextTypes ={
+		color: PropTypes.string 
+	}
 	render() {
 		 return (
-			 <div>
+			 <div style={{color: this.context.color}}>
 				 这里是内容部分
 			 </div>
 		 )
@@ -43,14 +49,19 @@ class Content extends Component{
 
 class HomePage extends Component { 
 	static childContextTypes = {
-		 color: PropTypes.string
+		color: PropTypes.string
 	}
 	constructor(props) {
 		super(props);
 		this.state ={
 			color: 'red'
 		}
 	}
+	getChildContext() {
+		return {
+			color: this.state.color
+		}
+	}
 	render() {
 		return (
 			<div>