如何写react组件

如何写react组件

组件作为React的核心内容,是View的重要组成部分,每一个View页面都由一个或多个组件构成,可以说组件是React应用程序的基石元素。

React支持三种方式来定义组件

● 函数式定义的无状态组件

● Es5原生方式React.createClass定义的组件

● Es6形式的extends React.Component定义的组件

一、无状态组件

function Nav(props) {
  return <div>{props.name} UED</div>
}
ReactDOM.render(<Nav name="Yuandian" />, rootNode)

二、es5方式创建组件

var Nav = React.createClass({
    getInitialState:function(){
      return {
           name:'Yuandian'
      };
    },
    render:function(){
        return  <div onClick={this._ClickEvent}>{this.state.name} UED</div>
    },
    _ClickEvent:function(){
        console.log(`This is ${this.state.name} UED`)
    }
})

三、es6方式创建组件

class Nav extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'Yuandian'
        };
        this._ClickEvent= this._ClickEvent.bind(this);
    }
    render() {
        return  <div onClick={this._ClickEvent}>{this.state.name} UED</div>
    },
    _ClickEvent(){
        console.log(`This is ${this.state.name} UED`)
    }
}
Image placeholder
前端答疑
未设置
  92人点赞

没有讨论,发表一下自己的看法吧

推荐文章
如何引入react组件库

如何引入react组件库1、通过npm安装antd推荐(Node.js教程)antd是基于AntDesign设计体系的ReactUI组件库,主要用于研发企业级中后台产品。npminstall-Dant

如何将样式加入到react组件上

如何将样式加入到react组件上一、使用行内样式想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现://注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 H

如何开发react组件库

如何开发react组件库技术栈:React+Webpack+TypeScript+Docz先上脚手架目录结构docz:docz文档生成器的配置目录example:demo目录lib:打包后生成文件目录

如何封装一个react组件

如何封装一个react组件1、对于reactscript,官方建议我们用JSX(javascriptxml)语法糖,需要引入额外的解析文件去解析。2、render方法:用于给dom元素插入渲染类dom

我在大厂写React,学到了什么?性能优化篇

课程推荐:前端开发工程师--学习猿地--送8个上线商业项目 前言我工作中的技术栈主要是React+TypeScript,这篇文章我想总结一下如何在项目中运用React的一些技巧去进行性能优化,或者更好

怎么封装react组件

怎么封装react组件1、封装自己的组件使用es6的扩展类的方式,在基类中扩展组件。importReact,{Component}from'react'; classClickCounterexten

怎么创建react组件

怎么创建react组件创建react组件有3种方式,分别是无状态函数式组建、es5原生方式、继承React.Component(ES6形式)。一、无状态函数式组建无状态函数式组件,也就是你无法使用St

什么是react组件

什么是react组件组件就是页面上的一部分。我们可以把一个大的网页拆分成很多小的部分。比如标题部分,对应一个组件,就是标题组件。搜索部分,对应的组件就是搜索组件。页面上很多区域也可以拆分成组件,所以页

react如何写搜索框

react如何写搜索框react写搜索框的思路:1、添加一个input框,为它绑定onChange事件2、在onChange事件中通过拼接url和input框的内容得到一个搜索链接;3、通过fetch

如何写出让同事好维护的代码?

上篇牛逼:如何写出让同事无法维护的代码?这篇教你如何写出不让同事无法维护的代码!写出整洁的代码,是每个程序员的追求。《cleancode》指出,要想写出好的代码,首先得知道什么是肮脏代码、什么是整洁代

.vue文件中如何写注释?

.vue文件中如何写注释?.vue文件中,每个代码块内,注释的时候,需要使用各自语言的注释语法去注释(HTML、CSS、JavaScript、Jade等)。在文件最顶部注释的时候用HTML的注释语法:

使用$emit传参:如何同时接收父组件和子组件的参数?

需求描述:组件内部发射事件并且有参数传递出来,然后监听该事件时,事件处理程序又同时需要获取组件外面传进来的参数举个例子:tag-input组件监听change事件 methods:{ ...,

分享一款支持多种短信服务商 Hyperf 组件,基于 overtrue/easy-sms 组件改造

一款支持多种短信服务商Hyperf组件1.新增配置文件phpbin/hyperf.phpvendor:publishhyperf-libraries/sms2.修改配置

react中如何使用组件

react中如何使用组件前文我们介绍过了《如何写react组件》(感兴趣的同学可以过去学习),下面我们来说一下如何使用react组件。1、无状态组件的使用方法组件:constApp=(props)=>

开源React Native组件库beeshell 2.0发布

2018年,我们开源了ReactNative组件库——beeshell1.0。时隔一年,我们对ReactNative组件库继续优化,实现beeshell2.0升级,开源38个功能。希望更好的服务社区,

美团大规模微服务通信框架及治理体系OCTO核心组件开源

微服务通信框架及治理平台OCTO作为美团基础架构设施的重要组成部分,目前已广泛应用于公司技术线,稳定承载上万应用、日均支撑千亿级的调用。业务基于OCTO提供的标准化技术方案,能够轻松实现服务注册/发现

如何在浏览器中获取 Production Mode 的 React 实例

https://github.com/LiuuY/Blog...在ProductionMode下,React并没有暴露其实例。无论什么原因如果你要获取的话可以参考以下方法。条件浏览器安装了ReactD

你真的了解 React 吗?这里有 50 个 React 面试问题

如果你是一位有理想的前端开发人员,并且正在准备面试,那么这篇文章就是为你准备的。本文收集了React面试中最常见的50大问题,这是一份理想的指南,让你为React相关的面试做好充分的准备工作。首先我

React Hooks 完全指南,读React作者博文感悟(2W字精华)

阅读facebook大佬:DanAbramov的文章颇有感悟大佬github地址https://github.com/gaearon 重点总结 useEffect是同步的 状态是捕获的当前props

react学习路线图,学习react就是有捷径

课程推荐:web全栈开发就业班--拿到offer再缴学费--融职教育 文章摘自:https://sunmenglei.blog.csdn.net/article/details/108554788

app.vue组件如何按需加载?

app.vue组件如何按需加载?按需加载组件,或者异步组件,主要是应用了component的is属性1、template中的代码:这里的每一个按钮,都要显示不同的组件,所以我让他们使用了同一个方法名

【Kubernetes系列】第5篇 Ingress controller – traefik组件介绍

1.概述为了能够让Ingress资源能够工作,在Kubernetes集群中必须至少有一个运行中的ingresscontroller组件。也就是说如果在kubernetes集群中没有一个ingressc

已配置 4000+ 页面,携程前端组件化探索之“乐高”运营系统

一、前言 市场部活动组主要负责各种运营活动的相关开发,分为常规运营活动和定制运营活动。常规运营活动因为组件(模块)具有复用性,并且配置化需求非常多,因此我们建设了一个可视化页面搭建平台——乐高(leg

Hyperf 发布 Session、极简 DB、zk 配置中心组件和支持 Twig/Plates 视图引擎支持

更新内容 本周更新主要新增极简DB组件,Zookeeper配置中心,和Session组件,以及为视图组件增加了Twig和Plates视图引擎的支持,同时为计划任务组件增加了集群执行的支持。极简DB组件

Hyperf 权限管理组件 hyperf-permission 发布

本人正在申请版主,还望各位多评论,收藏,点赞GITHUB:https://github.com/donjan-deng/hyperf-perm...欢迎star,欢迎pr.Hyperf权限管理组件sp