state狀態(tài)和props屬性是react非常重要的兩個方面,狀態(tài)控制組件內(nèi)部的變化繁扎,屬性獲取外部傳遞給內(nèi)部的數(shù)據(jù)幔荒,當state和props改變時,會重新調(diào)用render方法梳玫,渲染dom對象爹梁。
state狀態(tài)
常用方法:
- getInitialState:獲取組件的初始化狀態(tài),在組件加載的時候調(diào)用(render前)
- this.state:獲取組件的狀態(tài)的值提澎,但不能通過this.state.xxx = xxx改變狀態(tài)的值
- this.setState:用來改變組件狀態(tài)的值 姚垃,用法如下
var Radio= React.createClass({
// 定義組件的初始狀態(tài),初始為關
getInitialState: function() {
return { checked: false }
}, // 通過 this.state 獲取當前狀態(tài)
changeCheck: function() {
this.setState({ checked: !this.state.checked}); }
}),
render: function() {
return <label className="radio">
<input type="radio" checked={this.state.checked} onChange={this.changeCheck}/> 選中
</label>
},
// 通過 setState 修改組件狀態(tài) // setState 過后會 React 會調(diào)用 render 方法重渲染
props屬性
常用方法:
1.this.props.xxx 用來獲取寫在組件中的xxx屬性的值 注意jsx中class屬性為 className虱朵,for屬性為 htmlFor莉炉;
2.getDefaultProps:獲取默認的屬性對象钓账,在render前調(diào)用一次碴犬,用于將組件中綁定的屬性添加到this.props ;可以設置默認值梆暮,當組件屬性沒傳值時服协,調(diào)用默認值;
3.this.props.children :獲取子節(jié)點的屬性啦粹,其中children只能為一個元素偿荷,不能為組件
var GetChildItem = React.createClass({
render: function() {
var props = this.props;
return <div className="todo-item">
<span class="todo-item__name">{props.children}</span>
</div>
}
});
ReactDOM.render(
<GetChildItem >子節(jié)點內(nèi)容</GetChildItem >, document.getElementById('example'));
- propsType用來校驗屬性傳遞的正確性(非空,類型驗證等),通常寫在最前面唠椭;
var MyComponent = React.createClass({
propTypes: {
optionalRequired:React.PropTypes.isRequired,//不能為空
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// 任何可以被渲染的包括跳纳,數(shù)字,字符串贪嫂,組件,或者數(shù)組
optionalNode: React.PropTypes.node,
// React 元素
optionalElement: React.PropTypes.element,
customProp: function(props, propName, componentName) {}//自定義校驗
}
});