目錄:
- 容器組件
- JSX可展開屬性
- 動畫 : CSS3 Transition
- 默認屬性
- 復用代碼:mixin
容器組件
React元素也可以包含其他的子元素,這意味着響應的React組件是一個 容器組件。比如:
//JSX <ezpanel title="title"> <p>this is demo content</p> </ezpanel>
上例中的EzPanel聲明了一個面板組件,而面板的內容在定義組件時是不可知的, 這些內容需要被加入到EzPanel渲染后的DOM元素中。
在React中,使用this.props.children就可以訪問React子元素,這樣我們 就可以輕松地將未知的React子元素包含到容器中:
var EzPanel = React.createClass({ render : function(){ return <div class="ez-panel"> {this.props.children} </div>; } });
JSX可展開屬性
在JSX中,有時一個React元素的屬性很多,比如在示例代碼中設置音量推子組件 的屬性:
//JSX <div classname="ez-slider" onmousedown="{this.onMouseDown}" onmousemove="{this.onMouseMove}" onmouseup="{this.onMouseUp}"></div>
JSX有一個很好的特性讓我們可以給React元素設置一個JSON對象作為屬性包,這個屬性 包將按照字段展開為分立的React元素的屬性,被稱為可展開屬性。使用如下 方式在React元素上聲明一個可展開屬性,其中propbag是一個JSON對象:
<any {...propbag}=""></any>
比如,前面的示例使用可展開屬性的方式改寫為:
//定義屬性包 var props = { className : "ez-slider", onMouseDown : this.onMouseDown, onMouseUp : this.onMouseUp, onMouseMove : this.onMouseMove }; //傳入屬性包 var rel = <div {...props}=""></div>;
動畫 : CSS3 Transition
在React中可以使用CSS3 Transition為組件增加過渡效果。不過,由於 CSS3 Transition需要DOM屬性的變化才能觸發,所以我們需要將屬性改變后的React 元素重新渲染到真實DOM上,才可以觸發過渡效果。
大致來講,在React中使用CSS3 Transition有以下步驟:
- 為元素聲明transition樣式
- 設置屬性初始值,第一次渲染元素
- 設置屬性目標值,第二次渲染元素
在示例代碼中,為了實現過渡效果,我們使用了一個內部狀態mounted 來實現第二次渲染:當初次渲染完成功后,通過setState()方法我們觸發 了再次渲染。第二次渲染時,我們重新設置了樣式,以便激活過渡過程。
需要注意的一點是window.getComputedStyle()方法的應用,調用 這個方法的目的是刷新DOM的樣式,以便確保之前設置的樣式已經被應用到DOM 上了。
默認屬性
對於一個組件來講,通常應該有一些默認的屬性值,這樣即使調用者沒有 顯示的指定某個屬性值,依然可以通過this.props獲得該值。這簡化了屬性值 缺失引起的錯誤檢查。
在React中定義組件時,使用getDefaultProps()方法聲明默認屬性:
var EzDemoComp = React.createClass({ //設置默認屬性值 getDefaultProps:function(){ return { value : 0 } }, render: function(){ //使用this.props.value訪問屬性,如果用戶沒有設置,則該值為默認值 return <div classname="ez-demo">{this.props.value}</div>; } }); //創建React元素時沒有指定屬性值 React.render(<ezdemocomp></ezdemocomp>, document.querySelector("#content"));
復用代碼:mixin
如果多個組件的實現代碼中有一些公共的部分,那么可以使用React的mixin特性 將這部分代碼提出來公用。mixin是摻合,混合,糅合的意思,即可以將一個對象的屬性 拷貝到另一個對象上。
在React中,使用mixin有兩個步驟:
- 定義一個mixin對象
mixin對象是一個JavaScript對象,這個對象的屬性將被拷貝到React組件類的原型對象上:
var EzLoggerMixin = { log:function(){ //sth. happened here. } };
- 在定義組件時使用這個mixin對象
在使用React.createClass()定義組件時,給傳入的原型對象設置mixins屬性:
React.createClass({ mixins:[EzLoggerMixin], render:function(){ //your render stuff. } });
mixins屬性是一個數組,這意味着可以指定多個mixin對象,但記住這些 mixin對象、以及在createClass()中傳入的原型對象,它們的屬性不能同名。