1》》》基础的props使用 不可修改父属性 getDefaultProps 对于外界/父组件的属性值，无法直接修改，它是只读的。
<script type="text/babel">
var Hello = React.createClass({
getDefaultProps:function(){
return{
name:'Default'
}
},
render:function(){
return (
<span>Hello {this.props.name} !</span>
);
}
});
ReactDOM.render(
<Hello />,
document.getElementById('example')
)
</script>
2》》》父子传递
<script type="text/babel">
//两层以上的传递
//1、props 属性值提倡显示的传递到下一级
//子组件
var Child = React.createClass({
render:function(){
return(
<span>Hello {this.props.fullName}</span>
);
}
}); var Parent = React.createClass({
addFamilyName:function(name){
return (name + 'chen');
},
render:function(){
return(
<div>
<Child fullName={this.addFamilyName(this.props.name)} name={this.props.name}/>
</div>
);
}
}); ReactDOM.render(
<Parent name="jin" />,document.getElementById('example')
)
</script>
》》》state和props的区别
1、state 本组件内的数据 相对封闭的单元/结构的数据 状态 组件的无状态
2、props 组件直接的数据流动 单向的 ，从owner向子组件
<script type="text/babel">
//props和state的区别
var Msg = React.createClass({
render:function(){
return(
<div>
<span style={{color:this.props.color}}>Hello {this.props.master}.IT is {this.props.time} now.the color is {this.props.color} </span>
</div> );
}
});
var Hello = React.createClass({
getInitialState:function(){
return{
time:new Date().toDateString(),
color:'red'
}
},
changeColor:function(){
this.setState({color:'green'})
},
render:function(){
return(
<div>
<span onClick={this.changeColor}>The ownerName is {this.props.name}</span>
<br/>
<Msg master={this.props.name} time={this.state.time} color={this.state.color} />
</div>
);
} }); ReactDOM.render(
<Hello name="world" />,
document.getElementById('example')
)
</script>
》》》propTypes
Prop 验证
1、React.PropTypes.string 2、React、PropTypes.bool 3、React.PropTypes.number 4、React.PropTypes.instanceOf(Message) 5、optionalUnion：React.PropTypes.oneOfType([]) 6、React.PropTypes.arrayOf(React.PropTypes.number) 7、customProp：function(props,propName,componentName)
propTypes。React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。注意为了性能考虑，只在开发环境验证 propTypes。下面用例子来说明不同验证器的区别：
React.createClass({
propTypes: {
// 可以声明 prop 为指定的 JS 基本类型。默认
// 情况下，这些 prop 都是可传可不传的。
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// 所有可以被渲染的对象：数字，
// 字符串，DOM 元素或包含这些类型的数组。
optionalNode: React.PropTypes.node,
// React 元素
optionalElement: React.PropTypes.element,
// 用 JS 的 instanceof 操作符声明 prop 为类的实例。
optionalMessage: React.PropTypes.instanceOf(Message),
// 用 enum 来限制 prop 只接受指定的值。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// 指定的多个对象类型中的一个
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
// 指定类型组成的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// 指定类型的属性构成的对象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// 特定形状参数的对象
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// 以后任意类型加上 `isRequired` 来使 prop 不可空。
requiredFunc: React.PropTypes.func.isRequired,
// 不可空的任意类型
requiredAny: React.PropTypes.any.isRequired,
// 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接
// 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
}
}
},
/* ... */
});
栗子：》》》》
<script type="text/babel">
//设定props的属性
var Hello = React.createClass({
propTypes:{
//name:React.PropTypes.string
//name:React.PropTypes.oneOf(['News','world'])
//type:React.PropTypes.oneOfType([
// React.PropTypes.string,
// React.PropTypes.number,
//]),
//type:React.PropTypes.arrayOf(React.PropTypes.number),
name:function(props,propName,componentName){
if(!/^W/.test(props[propName])){
return new Error(
'Invalid prop `' + propName + '`supplied to' + '`' + componentName + '`.Validtion failed.'
);
}
}
}, render:function(){
return (
<div>
<span>Hello {this.props.name}!</span>
</div>
);
}
}); ReactDOM.render(
<Hello name='world' />,
document.getElementById('example')
);
</script>
》》》this.props.children
<script type="text/babel">
//this.props.children var Note = React.createClass({
render:function(){
return(
<li>{this.props.text}</li>
);
}
}); var NotesList = React.createClass({
render:function(){
return(
<ol>
{
this.props.children.map(function(child,index){
return <Note key={index} text={child}/>
})
}
</ol>
);
}
}); ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.getElementById('example')
)
</script>
>>>结构赋值利用es6 ...
<script type="text/babel">
var Child = React.createClass({
render:function(){
return(
<div>
<span>
I am {this.props.name}! I am {this.props.age} years old. It is {this.props.time} now
</span>
</div>
);
}
}); var Parent = React.createClass({
getInitialState:function(){
return{
time: new Date().toDateString()
}
}, render:function(){
var {...others} = this.props;
return(
<Child {...others} time={this.state.time} />
);
}
}); ReactDOM.render(
<Parent name="chen" age="" />,
document.getElementById('example')
);
</script>