reactJS -- 7 可複用組件（Prop 驗證）

一.參考文檔

爲了防止傳入參數類型錯誤，增長參數驗證。

http://www.react-cn.com/docs/reusable-components.html

二. 給類定義屬性

BodyIndex.propTypes = {
  userId : React.PropTypes.number.isRequired ； //必須傳入參數
  userId : React.PropTypes.number； // userId被規定爲數值型
}

BodyIndex.defaultProps = defaultProps; //設置默認值，沒有參數傳進來時本身也存在默認值

三.代碼

必須向子頁面傳入userId

import React from 'react';
import ReactDOM from 'react-dom';
//引入body子頁面
import BodyChild from './BodyChild'

const defaultProps = {
  userName : "這是一個默認的 userName"
}
//export 暴露
export default class BodyIndex extends React.Component {
  constructor(){   //類的構造函數
    super(); // 調用基類的全部的初始化方法
    this.state = {
      userName: "parray",
      age: 10
    }; //初始化賦值
  }

  //建立事件
  changerUserInfo(age) {
    this.setState({age : age});
  }

  /**
   * 建立 input 改變事件
   * @param  {Event} event [description]
   * @return {[type]}       [description]
   */
  handleChildValueChange(event){
    this.setState({
      age : event.target.value
    })
    return '';
  }
  render() {   //解析類的輸出

    return (
      <div>
        <div className="c" id="id">alex asd content</div>
        <h2>頁面主體內容</h2>
        <p>接收到的父頁面的屬性 ：userId: {this.props.userId} userName : { this.props.userName}</p>
        <p>age:{this.state.age}</p>
        <input type= "button" value="submit" onClick={this.changerUserInfo.bind(this, 99)}/>
        <BodyChild { ...this.props}  id={4} handleChildValueChange = {this.handleChildValueChange.bind(this)}/>
      </div>
    )
  }
}

BodyIndex.propTypes = {
  userId : React.PropTypes.number.isRequired； //必須向子頁面傳入userId參數
}

BodyIndex.defaultProps = defaultProps; // 默認值

/* 在類定義完後能夠追加屬性
BodyIndex類有一個屬性 ：propTypes，傳入參數
1.定義 父頁面傳入的userId Prop 驗證
userId : React.propTypes.number; 類型的強制約束，只能是number類型值
2. 父頁面中調用子頁面，設置必須傳入 屬性 ： .isRequired
3. 設置默認值 ：defaultProps
4. 想把從父頁面傳進來的參數，直接傳給他的子頁面
{ ...this.props}--獲得父頁面從父級獲得的全部值
有新添加了一個屬性
*/

四.  獲得父級頁面從父級頁面的父級獲得的全部值

{ ...this.props}

<BodyChild { ...this.props}  id={4} handleChildValueChange = 

{this.handleChildValueChange.bind(this)}/>

index.js(根頁面)

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() {
		//能夠將組件定義爲參數
		const component = (
			<ComponentHeader/>
		)
		return (
			<div>
				{component}  {/*利用參數形式調用*/}
				<BodyIndex userId = {123456}/>
				<ComponentFooter/>
			</div>
		);
	}
}
ReactDOM.render(
	<Index/>, document.getElementById('example')
);

bodychild.js

import React from 'React';

export default class BodyChild extends React.Component{

  render(){
    return(
      <div>
      {/* 當子頁面input onchange 發生改變, 調用傳入的handleChildValueChange 函數*/}
          <p>子頁面輸入: <input type= "text" onChange={this.props.handleChildValueChange}/> </p>
          <p> 父頁面userId :{this.props.userId}  父頁面userName :{ this.props.userName} 新增長的ID:{ this.props.id} </p>
      </div>
    )
  }
}

/* 在父頁面中 聲明事件
//建立 input 改變事件
  handleChildValueChange(event){
    this.setState({age : event.target.value})
  };

  經過 ：event.target.value 獲取input的值
*/