从零一起学react(3)---组件的创建

原创 2017年10月11日 16:49:03

前言

组件的创建既可以用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。

版权声明:转载请注明博客地址谢谢。

相关文章推荐

react学习笔记 item3 --- 组件的创建方式

本文介绍了三种创建react 组件的方式:React.createClass、函数式组件和React.Component。通过示例介绍了三种创建方式的具体使用方法。...

一起来点React Native——常用组件之Text

React Native常用组件之Text 一、什么是Text组件? 一个用于显示文本的React组件,和Android中的TextView组件或者OC中的Label组件相类似,专门用...

一起来点React Native——常用组件之TextInput

React Native常用组件之TextInput

一起来点React Native——常用组件之Touchable系列

React Native之常用Touchable系列组件

从零学React Native之12 组件的生命周期

一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。ES6语法和之前的ES5语...

从零学React Native之08Image组件

开发过程中, 几乎每个项目都会用到图片. RN就是通过Image组件显示图片。既可以加载网络图片,也可以加载本地资源图片。 Image组件必须在样式中声明图片的款和高。如果没有声明,则图片将不会被...

3. React 组件生命周期介绍

React 中的每个组件都有三个阶段,这三个阶段构成了组件完整的生命周期。组件的生命周期为初始化→运行中→销毁,每个阶段都可以有开发者自定义的函数,执行不同的行为。下面介绍不同阶段的特点、不同阶段可以...

React(3)--组件的生命周期

我们正式开始 React 的学习我们先看一下 React 的一个简单的例子: React组件的生命周期 和 生命周期的方法...

Openlayers 3 使用React 组件化+wepack+ES6实践记录笔记

本博文不作深入研究内容,只用来记录使用React 组件化+wepack+ES6技术操作Openlayers 3 实践中遇到的问题,本博文作为开篇,所以只是简单的demo案例说明。后面还会有其他的一些博...

一起学react native实现简单购物车

前言 实现比较简单的购物车实例http://www.jianshu.com/p/c581c48a601f 这里写图片描述 项目源码: https://git...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:从零一起学react(3)---组件的创建
举报原因:
原因补充:

(最多只允许输入30个字)