React入門介紹(2)- React Component-React元件
阿新 • • 發佈:2019-02-08
允許使用者自由封裝元件是React非常突出的特性,使用者可將自己建立的元件像普通的HTML標籤一樣插入頁面,React.CreateClass
方法就是用來建立一個元件類的。在建立和呼叫react元件時有幾點需要注意,我們在實際的demo中進行總結。
從一個簡單的例子開始,我們嘗試建立一個包含文字框和提交按鈕的元件:
<div id="container"></div>
<script type="text/babel">
let InputWithButton = React.createClass({
render:function(){
return(
<div >
<input type="text" value="password"/>
<button>Submit</button>
</div>
)
}
});
ReactDOM.render(
<InputWithButton/>,
document.getElementById("container")
)
</script >
執行上述程式碼,顯示結果如下:
在上述程式碼中,需要注意以下幾點:
- 我們建立了一個名為
InputWithButton
的元件類,注意此處命名首字母必須大寫,自動生成InputWithButton
例項。 - 所有的元件都必須要有自己的render方法,用以輸出元件。
- 在建立元件類時,return的最終結果內只能包含一個頂級標籤,如果我們在上例中去掉div標籤直接返回
<input>
和<button>
,程式碼會報錯。 - 元件的用法與原生HTML的用法一致,直接在ReactDOM.render中插入
<InputWithButton/>
,注意"/"不能丟,在jsx解析時會根據"/"判斷標籤的閉合。
另外,像原生的HTML標籤一樣,可以給元件新增屬性,參考如下程式碼:
<div id="container"></div>
<script type="text/babel">
let InputWithButton = React.createClass({
render:function(){
return(
<div>
<input type="text" value={this.props.value} className="input"/>
<button>{this.props.name}</button>
</div>
)
}
});
ReactDOM.render(
<InputWithButton name="confirm" value="password"/>,
document.getElementById("container")
)
</script>
- 如上例中呼叫
<InputWithButton/>
標籤時,新增的name和value屬性,在建立元件類時,可以通過this.props物件是獲取元件的屬性,在input通過this.props.value給value賦值,在button中通過this.props.name賦值,注意都要包裹在{}內。 新增屬性時需要注意新增class屬性時要用className,for屬性用htmlFor,這是因為class和for是JavaScript的保留字。
在使用this.props物件獲取屬性時,需要注意比較特殊的this.props.children,他表示元件的所有子節點。<div id="container"></div> <script type="text/babel"> let FormList = React.createClass({ render:function(){ return( <form> { React.Children.map(this.props.children,function(child){ return <button>{child}</button>; }) } </form> ) } }); ReactDOM.render( <FormList> <span>Submit</span> <span>Clear</span> <span>Cancel</span> </FormList>, document.getElementById("container") ) </script>
如上程式碼,我們嘗試建立一個包含三個按鈕的form表單,在建立FormList元件類時,通過
this.props.children
獲取FormList下的子元素,通過React.Children.map
遍歷節點。通過React專用的除錯工具,我們可以檢視FormList元件類的具體組成如下:
對於React的入門還是比較容易的,但想深入掌握還有些路要走,要儘快熟悉JSX的語法規則,主要參考阮一峰大神的react入門例項教程和官方文件。
原文連結:http://www.cnblogs.com/Nancy-wang/p/6995211.html