React的组件用法
React.createClass()
中文翻译 https://discountry.github.io/react/3.4K ( https://doc.react-china.org868 )
React支持组件的运用React.createClass 方法就用于生成一个组件类
下面这是一个用Reac.createClass写的一个DOM页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script type="text/javascript" src="build/browser.min.js">
</script>
</head>
<div id="esample">
</div>
<body>
<script type="text/babel">
var Hello=React.createClass({//定义组件的方法，首字母必须大写
render:function(){
return <h1> Hello {this.props.name}//必须只有一个标签
</h1>;
}
});
ReactDOM.render(//值传参数
<Hello name="React"/>,
document.getElementById("esample")
);
</script>
</body>
</html>
我们修改几个地方看看React打死不能动的地方
我们从代码里面可以看出，当我们把VAR 后面的首字母H改成小写h可以看出控制台就会报错，我们由此知道声明后边的首字母必须大写；
上述的代码用React.createClass()封装了一组代码，组件名字为Hello
在调<Hello name="React">组件的属性可以在组件类的 this.props对象上获取
class的用法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script type="text/javascript" src="build/browser.min.js"> </script> <style type="text/css"> .red{ color: red; } </style> </head> <div id="esample"> </div> <body> <script type="text/babel"> var Hello=React.createClass({//定义组件的方法，首字母必须大写 render:function(){ return <h1 className="red"> Hello {this.props.name}</h1>; // className首字母要小写 } }); ReactDOM.render(//值传参数 <Hello name="React"/>, document.getElementById("esample") ); </script> </body> </html>
效果
React.createClass
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script type="text/javascript" src="build/browser.min.js">
</script>
</head>
<div id="esample">
</div>
<body>
<script type="text/babel">
var Title=React.createClass({
propTypes:{
title:React.PropTypes.string.isRequired,
},
render:function(){
return <h1>你好 {this.props.title}</h1>
//此处定义的是字符串类型所以后面必须写出字符串类型
}
});
ReactDOM.render(
<Title title='123' />,
//如这写123不加引号的话，控制台会报错
document.getElementById('esample')
)
</script>
</body>
</html>
上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。
如果我们把字符串的值换了我们看看浏览器报的错
此外，getDefaultProps 方法可以用来设置组件属性的默认值。我们把titel:里面的string类型改成number类型也可以显示
