react組件 -- React.createClass()方法


1、React.createClass()方法用於生成一個組件類

2、所有組件類都必須有自己的render方法,用於輸出組件

3、假如生成一個組件類HelloMessage,模板插入<HelloMessage />時,會自動生成組件類HelloMessage的一個實例

4、組件類的第一個字母必須大寫,否則會報錯,比如HelloWorld,不能寫成helloWorld

5、組件類里面只能包含一個頂層標簽,否則會報錯(組件類的render方法里面)

6、組件類對應的標簽的用法和HTML標簽的用法完全一致,可以加入任意的屬性。假如生成一個組件類HelloMessage,其對應的組件標簽就是<HelloMessage />,在這個標簽里面可以加入普通的HTML標簽的任意屬性,例如:<HelloMessage name="小丸子"/>,就是給組件標簽<HelloMessage />加入了一個name屬性,值為“小丸子”

7、給組件標簽添加屬性時,需要注意兩個地方,就是把class屬性寫成className,for屬性寫成htmlFor,這是因為class和for時JS里面的保留字

 

下面舉一個例子:

 

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});

 

ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);
</script>
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM