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>