关闭

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

标签: react组件
806人阅读 评论(0) 收藏 举报
分类:

前言

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

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

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

本文介绍了三种创建react 组件的方式:React.createClass、函数式组件和React.Component。通过示例介绍了三种创建方式的具体使用方法。
  • u014607184
  • u014607184
  • 2016-11-19 15:58
  • 817

React源码分析3 — React组件插入DOM流程

React组件插入流程1 简介React广受好评的一个重要原因就是组件化开发,一方面分模块的方式便于协同开发,降低耦合,后期维护也轻松;另一方面使得一次开发,多处复用称为现实,甚至可以直接复用开源React组件。开发完一个组件后,我们需要插入DOM中,一般使用如下代码ReactDOM.render(...
  • u013510838
  • u013510838
  • 2017-02-23 18:08
  • 1810

在做react项目开发中创建组件的三种方式

第一种:函数式定义的无状态组件 用途:只是为了创建纯展示组建,这类组件只负责根据传入的props属性来展示组建,不涉及对组件state状态的操作,无状态组件只有一个render方法输出, 例如:function HelloComponent(props, /* context */) ...
  • running_shuai
  • running_shuai
  • 2017-01-05 14:42
  • 1667

React创建组件的三种方式及其区别

React创建组件的三种方式及其区别 React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式: 函数式定义的无状态组件es5原生方式React.createClass定义的组件es6形式的extends React.Componen...
  • liangklfang
  • liangklfang
  • 2016-11-26 16:58
  • 1010

使用React.js生成基本组件

说实话React的学习并不简单,虽然做了一些知识学习,但是还没有到那种自己想实现一个功能的时候就能立马写出代码的能力;所以现在还是需要多巩固,多写代码,然后今天参考了官网上的文档,自己又照葫芦画瓢实现上面的一些例子。 首先说一下“”组件“吧 个人理解就是封装好的具有一定功能,属性和外形的一个&q...
  • liuzijiang1123
  • liuzijiang1123
  • 2017-03-09 19:49
  • 549

零基础学习hadoop到上手工作线路指导

问题导读: 1.hadoop编程需要哪些基础? 2.hadoop编程需要注意哪些问题? 3.如何创建mapreduce程序及其包含几部分? 4.如何远程连接eclipse,可能会遇到什么问题? 5.如何编译hadoop源码?   阅读此篇文章,需要些基...
  • whl632359961
  • whl632359961
  • 2016-06-15 09:55
  • 7647

React学习笔记——如何创建React组件

最近在空闲之余学习了一下React,发现React入门比angular2较为容易很多(个人观点,不喜勿喷),代码逻辑非常简单,只要是有JavaScript基础的童鞋,都能看明白,想要入门的童鞋们,如果英文阅读能力还不错的,或者想要提高自己英文阅读水平的,可以看下React官网的的Tutorial,不...
  • GongZhongNian
  • GongZhongNian
  • 2017-06-11 12:24
  • 348

react-native 自定义组件

创建第一个组件 react-native 组件只需要在组件代码后面加上:module.exports = YoukuComponet; “YoukuComponet”是我这里将要创建的一个demo组件。 SudokuView组件的代码如下:/** * Created by ypxu87 on ...
  • ypxu87
  • ypxu87
  • 2016-03-02 11:36
  • 5066

React从零开始

Facebook 发布的React框架采用了不同的
  • tommystudio
  • tommystudio
  • 2015-04-12 16:17
  • 1187

React 自定义组件与组件复用

不可控组件和可控组件        不可控组件使用方式:        React.findDomNode(this.ref.input).value 可控组件使用方式:    ...
  • minihoop
  • minihoop
  • 2016-05-06 15:38
  • 705
    个人资料
    • 访问:15179次
    • 积分:857
    • 等级:
    • 排名:千里之外
    • 原创:70篇
    • 转载:20篇
    • 译文:0篇
    • 评论:7条
    GitHub和个人主页
    博客专栏
    文章分类
    最新评论