如何封装一个react组件


如何封装一个react组件

1、对于react script,官方建议我们用JSX(javascript xml)语法糖,需要引入额外的解析文件去解析。

2、render方法:用于给dom元素插入渲染类dom的元素使用语法:ReactDOM.render();

参数1:类dom元素,参数2:DOM对象

3、创建组件:createClass方法

语法:React.createClass();赋予一个变量名作为组件名

参数:一个render对象,可以使用一个函数的返回值去渲染组件

4、给自定义组件添加属性使用 this.props.attribute(自定的)

5、设置样式,不能直接在类dom元素中直接使用class,因为类dom不是真的dom,设置插入样式使用className属性,里面放一个驼峰形式声明的样式对象,也可以使用内联样式,同样放的是一个样式对象

6、对于类Dom元素的渲染,还可以使用数组的方式去定义多个

7、类dom元素的渲染,需要使用一个块级元素(诸如div,section之类的)去包裹,或者数组

8、在类dom元素中,可以使用{},插入表达式。

以下是demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React test</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="demo"></div>
    <div id="express"></div>
    <script type="text/babel">
    var Componement = React.createClass({
    render:function(){
return(
<div>
<Name name = {this.props.name} />
<Content content={this.props.content} />
</div>
);
    }
    });
    var Name = React.createClass({
    render:function(){
    return(
<h1>{this.props.name}</h1>
    );
    }
});
  var Content = React.createClass({
  render:function(){
return(
<a href= >
{this.props.content}
</a >
);
}
});
ReactDOM.render(
<Componement name = 'myComponement' content='http://www.baidu.com'/>,
document.getElementById('demo')
);
var domArray = [<h1>{1+1}</h1>,<p>{2+2}</p >];
ReactDOM.render(
<section>{domArray}</section>,
document.getElementById('express')
);
    </script>
  </body>
</html>
Image placeholder
前端答疑
未设置
  86人点赞

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

推荐文章
怎么封装react组件

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

如何引入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起源于Facebook的内部项目,因为该公司对市场上所有JavaScriptMVC框架,都不满意,就决定自己写一套,用来架设Instagram的网站。做出来以后,发现这套东西很好用,就在20

怎么创建react组件

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

什么是react组件

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

怎么新建一个react项目

怎么新建一个react项目现在比较流行和常用的方式就是利用create-react-app脚手架来帮我们搭建一个初始的react项目,准备工作安装node环境,这个去百度搜索下node安装,在命令行中

Python 多个return值

多个return值 那如果你想从一个函数里返回两个变量而不是一个呢?新手们有若干种方法。最著名的方法,是使用global关键字。让我们看下这个没用的例子: defprofile(): globalna

使用$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个功能。希望更好的服务社区,

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提供的标准化技术方案,能够轻松实现服务注册/发现

如何在浏览器中获取 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

使用vue实现一个电子签名组件

使用vue实现一个电子签名组件在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在

使用vue实现一个电子签名组件

在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在之前的文章里我们使用canva

如何用react做一个表格

如何用react做一个表格1、首先使用React.createClass方法创建一个组件;2、在render中通过React.DOM创建table、tr、tbody标签;3、在tr标签中使用map方法