React props 和 state

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>
				)
			}
			
		})