props

props 獲取的是外部傳入的值在元件中只能使用不能修改

物件作為屬性值

var obj = {
			name1:"deft",
			name2:"iboy"
		}
		// ...  這是一個語法糖 延遲操作符
		ReactDOM.render(
			<Hello {...obj} />,
			box
		)

函式呼叫作為屬性值

/*
		 * 元件的屬性值還可以是函式呼叫
		 */
		var Ul = React.createClass({
			render:function(){
				return (
					<ul>
						{this.props.arr.map(function(v,k){
							return <li>{v}</li>
						})}
					</ul>
				)
			}
		});
		
		function getArr (n) {
			var arr = [];
			for (var i=0;i<n;i++) {
				arr[i]=i;
			}
			return arr;
		}
		ReactDOM.render(
			<Ul arr={getArr(5)} />,
			box
		)
 

children 通過 this.props.children 得到的時元件中的內容

var Child = React.createClass({
			render:function(){
				return <ul>
						{this.props.children.map(function(v,k){
							return <li>{v}</li>
						})}
					</ul>
			}
		})
		
		ReactDOM.render(
			<Child>
				<h1>一級標題</h1>
				<h2>二級標題</h2>
			
			</Child>,
			box
		)
 

設定 props 的預設值

 var Def = React.createClass({
        //getDefaultProps: 給 props 設定 預設值
        getDefaultProps:function(){
            return {
                name:"趙本山"
            }
        },
        render:function () {
            return (
                <div>
                    <p>{this.props.name}</p>
                </div>
            )
    }
    });
    ReactDOM.render(
        <Def/>,
        box
    );
 

state 

state 記錄的是元件的狀態 只有改變 state物件中的屬性值才會引起元件的再次渲染

使用 state的步驟         1,設定初始值         2,在元件中通過 this.state.屬性名 獲取/設定該屬性值

var Check = React.createClass({

			//設定state的初始值
			getInitialState:function(){
			    return{
                    isCheck:false
				}
			},
			change:function() {
				this.setState({
					isCheck: !this.state.isCheck
				})
			},
			render:function(){
				return(
					<div>
						<input onChange={this.change} type="checkbox" />
						<p>{this.state.isCheck?"你勾選了":"你沒勾選"}</p>
					</div>
				)
			}
			
		})