react属性与事件之Props属性

Props属性

对于模块属于外来属性

在index.js里面定义username的值

var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
import ComponentFooter from './components/footer';
import BodyIndex from './components/bodyindex';
class Index extends React.Component {

	componentWillMount(){
		//定义你的逻辑即可
		console.log("Index - componentWillMount");
	}

	componentDidMount(){
		console.log("Index - componentDidMount");
	}

	render() {
		/*
		var component;
		if (用户已登录) {
			component = <ComponentLoginedHeader/>
		}
		else{
			component = <ComponentHeader/>
		}
		*/
		return (
			<div>
				<ComponentHeader/>
				<BodyIndex userid={123456} username={"nick"}/>  //传递参数
				<ComponentFooter/>
			</div>
		);
	}
}
ReactDOM.render(
	<Index/>, document.getElementById('example'));

bodyindex.js模块里面引用index.js的username的值

import React from 'react';
export default class BodyIndex extends React.Component {
  constructor(){
      super(); //调用基类的所有的初始化方法
      this.state =  {
        username : "Parry",
        age : 20
      }; //初始化赋值
  }

	render() {
    setTimeout(()=>{
      //更改 state 的时候
      this.setState({username: "IMOOC",age : 30});
    },4000);

		return (
			<div>
				<h2>页面的主体内容</h2>
				<p>{this.state.username} {this.state.age} {this.props.userid} {this.props.username}</p>
			</div>
		)
	}
}

小结

传递参数

模块中接受参数 this.props.username