怎么封装react组件

怎么封装react组件

1、封装自己的组件

使用es6的扩展类的方式,在基类中扩展组件。

import React, { Component } from 'react';
class ClickCounter extends Component{
    constructor(props){
        //当父组件向子组件传递数据时,需要在这里传入props。
        super(props);
        //由于事件函数onClickButton不是在render函数中定义的,
        //所以需要通过bind绑定this指向。
        this.onClickButton=this.onClickButton.bind(this);
        //通过state来定义当前组件内部自己的数据
        this.state={count:0};
    }
    onClickButton(){
        //通过setState方法 来改变state对象中的值。
        this.setState(
            {
            count:this.state.count+1
            }
        );
    }
    render(){
        //在render中定义样式,必须使用对象的方式。
        const counterStyle={
            margin:'16px',
            fontSize:'24px'
        };
        return (
            {/*在jsx中,使用这个方式进行注释 */}
            {/*在jsx中,使用在render函数中,定义的样式*/}
            <div style={counterStyle}>
                {/*在jsx中,使用onClick方式进行事件绑定,
                不同于html行内事件绑定,原理参考jsx文章*/}
                <button onClick={this.onClickButton}>
                    Click me
                </button>
                <div>
                    Click Count:
                    <span id="clickCount">
                        {this.state.count}
                    </span>
                </div>
            </div>
        );
    }
}
//导出当前定义的组件
export default ClickCounter;

2、使用自定义组件

引入react,使用es6的import...from...方式导入,对应着需要使用export default... 导出。

另外,如果需要dom操作,需要引入react-dom。

使用es6的解构赋值,单独引入Component。

注意:

(1)React必须引入,由于JSX最终会被转译成依赖React的表达式。

(2)Component 是所有组件的基类。

import React, { Component } from 'react';
import ClickCounterfrom './ClickCounter/ClickCounter'
class App extends Component {
  render() {
    return (
      <div className="App">
        <h2>标题</h2>
        <ClickCounter></ClickCounter>
      </div>
    );
  }
}
export default App;
Image placeholder
前端答疑
未设置
  49人点赞

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

推荐文章
如何封装一个react组件

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

怎么创建react组件

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

什么是react组件

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

如何引入react组件库

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

如何写react组件

如何写react组件组件作为React的核心内容,是View的重要组成部分,每一个View页面都由一个或多个组件构成,可以说组件是React应用程序的基石元素。React支持三种方式来定义组件●函数式

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

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

如何开发react组件库

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

怎么看有没有安装react

怎么看有没有安装react一、查看本机是否安装了react的方法●打开cmd输入npmlist-g--dept0有react则已全局安装●进入C:\Users\xxx\AppData\Roaming\

怎么安装react-router

怎么安装react-router安装命令:npminstallreact-routerreact-router路由提供了一些router的核心api,包括Router,Route,Switch等,但是

怎么下载安装react?

1、首先,要安装Node.js及NPM。可以去官网下载最新的版本:https://nodejs.org/下载好之后一直点击下一步,安装完成!!!查看安装情况:按下win+r键打开运行,输入cmd回车,

全局安装react脚手架在哪装?

全局安装react脚手架在哪装?全局安装react脚手架在任何目录下都可以,因为和当前所在目录没有关系。一、全局安装react脚手架npminstall-gcreate-react-app -g参数表

封装Vue组件并发布到npm上

推荐课程:前端开发工程师--学习猿地 一、构建一个vue项目vuecreatehello-world1.创建组件在src/components/JudyButton.vue组件内容: 2.Ap

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

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

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

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

开源React Native组件库beeshell 2.0发布

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

react中如何使用组件

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

Go语言高级编程_2.6 实战: 封装qsort

2.6实战:封装qsort qsort快速排序函数是C语言的高阶函数,支持用于自定义排序比较函数,可以对任意类型的数组进行排序。本节我们尝试基于C语言的qsort函数封装一个Go语言版本的qsort函

layui封装模块基础教程

layui是国人开发的一款非常简洁的UI框架,使用了模块化加载方式,因此在使用过程中我们难免需要添加自己的模块,本教程就教大家封装一个简单的模块。平常使用中,ajax可以说使用广泛,所以这里我们添加一

面向对象的封装特性和static关键字笔记

封装流程:1:私有化成员变量,使用private关键字修饰;2:提供公有的get和set方法,在方法体中进行合理值的判断;3:在构造方法中调用set方法进行合理值的判断

面向对象的封装特性和static关键字笔记

static修饰成员变量后,由成员变量层级提升为类层级

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

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

你真的了解 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

Flutter高内聚组件怎么做?闲鱼打造开源高效方案!

fish_redux是闲鱼技术团队打造的开源flutter应用开发框架,旨在解决页面内组件间的高内聚、低耦合问题。开源地址:https://github.com/alibaba/fish-redux从