逆战1913——React——Props

Props

props：指一个组件被重复使用但是显示的内容却不同
组件：props传参
props是组件对外的接口，使用peops就可以向组件内部进行数据传递。
注意 ：props对于使用它的组件来说，是只读的，一旦赋值就不能被修改。也就是说peops的值是不可以改变的，只能在渲染的时候传入，无法动态赋值。
组件无论是使用函数声明还是通过class声明，都绝不能修改自身的peops
当一个组件被注入peops值的时候，属性值来源于它的父级元素，从父级到子集元素。
eg：

function() Odd(props){
	return <h1>{props.name}</h1>
}
var element=<Odd name="我是传输的数据" />
ReactDOM.render(
	element,
	document.getElementById('demodiv')
);

组件：peops传入多个参数
在参数较多的时候可以把Object类型进行传递
eg：

<script type="text/babel">
	function Odd(props){
		return <div>
			<p>{props.name}</p>
			<p>{props.age}</p>
			<p>{props.sex}</p>
			</div>
}
var obj={name:"老王",age:18,sex:"男"}//使用扩展运算符传入对象数据
var element=<Odd {...obj} />
ReactDOM.render(
	//调用
	element,
	document.getElementById('demodiv')
);
</script>

组件：props默认值
用||来进行判断（在这里是需要引用react 15x的依赖包）
eg：

function() Odd(props){
//设置props的默认值 用||来进行默认值的设置
	props.text=props.text||"我是默认值"
	return <div>{props.text}</div>
}

ReactDOM.render(
	<Odd />,
	document.getElementById('demodiv')
);

组件：props默认值defaultProps
有些时候，我们需要设置一些默认属性，在父级组件未向子级组件传递数据的时候，填充默认值。
eg：

<script type="text/babel">
	function Odd(props){
		return <div>
			<p>{props.name}</p>
			<p>{props.age}</p>
			</div>
}
//设置默认值
Odd.defaultProps={
	name:"我是name的默认值",
	age:"我是age的默认值"
}；
ReactDOM.render(
	<Odd />,
	document.getElementById('demodiv')
);
</script>

Props验证
新版的验证方式需要注意引用prop-types库
eg：

//props验证
//1.引用验证js包
//2.设置验证
	Odd.propTypes={
//验证必须是字符串，isRequired不能为空
//注意字母大小写
		name：PropTypes.string.isRequired，
	age：PropTypes.number.isRequired
	}

组件——class类定义方式：传入参数
使用this.props.xx接收值
eg：

<script type="text/babel">
class Odd extends React.Components{
	render（）{
		return (<div>
					<p>{props.name}</p>
					<p>{props.age}</p>
				</div>)
	}
}

ReactDOM.render(
	<Odd name="我是name" age="我是age" />,
	document.getElementById('demodiv')
);
</script>

defaultProps：设置默认属性
类方式创建使用defaultProps进行默认值设置两种方式
eg：

class Odd extends React.Component{
//方式1设置默认值
	static defaultProps={name："name默认值"}
	render（）{
		return（
			<div>
				<p>{this.props.name}</p>
				<p>{this.props.age}</p>
			</div>
		）
	}
}
//方式2设置默认值
	Odd.defaultProps={
		name："name默认值"
	}；
ReactDOM.render（
<Odd age="我是age" />,
document.getElementById（'demodiv'）
）
class Odd extends React.Component{
	render（）{
		return（
			<div>'
				<p>{this.props.name}</p>
				<p>{this.props.age}</p>
			</div>
		）
	}
}
Odd.propsTypes={
	name：PropsTypes.string
}
var namedata=18
ReactDOM.render（
<Odd name={namedata} />,
document.getElementById("demodiv")
）

以上纯属个人理解，有误请指出。