前言
组件的创建既可以用createClass(ES5语法)也可以用class(ES6语法),既然ES6比较新,本文及以后就一直用ES6语法了。两种语法如下。
//使用ES5语法
var MyComponentES5 = React.createClass({
render: function(){
return (<h1>Hello world</h1>);
}
});
//使用ES6语法
class MyComponentES6 extends React.Component {
render() {
return <h1>Hello world</h1>;
}
}
组件
1.组件的创建
其实前言中已经创建了一个组件了,这里先贴上完整代码。
<body>
<div id="test"></div>
<script src="./react/react.development.js"></script>
<script src="./react/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.js"></script>
<script type="text/babel">
class Hello extends React.Component {
render() {
return (<h1>Hello world</h1>);
}
}
ReactDOM.render(
<Hello />,
document.getElementById('test')
);
</script>
</body>
这样,我们就创建了一个名叫Hello的组件。(注意:组件的名称首字母要大写!这是规定。)
在组件中,我们创建了一个render方法,这个方法返回了一个JSX表达式。
在ReactDOM.render()中使用组件的方法就是<组件名 />。
2.组件中使用变量属性
const blog={
src: 'https://buppt.github.io',
name: 'buppt'
}
class Myblog extends React.Component{
render(){
return (
<a href={blog.src}>这是我的博客{blog.name}</a>
);
}
}
ReactDOM.render(
<Myblog />,
document.getElementById('test')
);
和之前的一样,即在JSX中使用JS需要用{大括号扩起来}。
3.render方法
render方法需要一个返回return,但在return之前也可以写一些其他的代码,如。
const test = Math.random() < 0.5;
class Hello extends React.Component{
render(){
let task;
if(test){
task = "I'm true";
}else{
task = "I'm false";
}
return (<h1>{task}</h1>);
}
}
ReactDOM.render(
<Hello />,
document.getElementById('test')
);
这样浏览器将随机显示I’m true或I’m false。
4.在组件中使用this
先看一个例子.
class Hello extends React.Component{
get name() {
return 'buppt';
}
render() {
return (<h1>My name is {this.name}.</h1>);
}
}
ReactDOM.render(
<Hello />,
document.getElementById('test')
);
this即该组件。
5.组件中事件监听
class Hello extends React.Component{
name() {
alert('My name is buppt');
}
render() {
return <button onClick={this.name}>点我!</button>;
}
}
ReactDOM.render(
<Hello />,
document.getElementById('test')
);
这里注意,button中的onClick事件要大写第一个C。
6.组件中使用另一个组件
和第一点中说的一样,使用组件只需要使用<组件名 />即可。例如:
class Hello extends React.Component {
render() {
return (<h1>Hello</h1>);
}
}
class World extends React.Component {
render() {
return (
<div>
<Hello />
<h1> World</h1>
</div>);
}
}
ReactDOM.render(
<World />,
document.getElementById('test')
);
7.无状态组件
如果一个组件中只有一个render()
属性,我们可以把这个组件写成js function的形式,如。
class Hello extends React.Component{
render() {
return (<h1>Hello</h1>);
}
}
//可以写成下面的形式
const Hello = () =>{
return <h1>Hello</h1>;
}
这种形式的组件可以传递props属性,如下:
const Hello = (props) =>{
return <h1>{props.message}</h1>;
}
ReactDOM.render(
<Hello message="Hello World" />,
document.getElementById('test')
);
就到这里把~下一篇讲组件的state和props。