实例讲解React 组件


Posted in Javascript onJuly 07, 2020

本章节我们将讨论如何使用组件使得我们的应用更容易来管理。

接下来我们封装一个输出 "Hello World!" 的组件,组件名为 HelloMessage:

function HelloMessage(props) {
 return <h1>Hello World!</h1>;
}
 
const element = <HelloMessage />;
 
ReactDOM.render(
 element,
 document.getElementById('example')
);

实例解析:

1、我们可以使用函数定义了一个组件:

function HelloMessage(props) {
 return <h1>Hello World!</h1>;
}

你也可以使用 ES6 class 来定义一个组件:

class Welcome extends React.Component {
 render() {
 return <h1>Hello World!</h1>;
 }
}

2、const element = <HelloMessage /> 为用户自定义的组件。

注意,原生 HTML 元素名以小写字母开头,而自定义的 React 类名以大写字母开头,比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。

如果我们需要向组件传递参数,可以使用 this.props 对象,实例如下:

function HelloMessage(props) {
 return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="3water"/>;
 
ReactDOM.render(
 element,
 document.getElementById('example')
);

以上实例中 name 属性通过 props.name 来获取。

注意,在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。

复合组件

我们可以通过创建多个组件来合成一个组件,即把组件的不同功能点进行分离。

以下实例我们实现了输出网站名字和网址的组件:

function Name(props) {
 return <h1>网站名称:{props.name}</h1>;
}
function Url(props) {
 return <h1>网站地址:{props.url}</h1>;
}
function Nickname(props) {
 return <h1>网站小名:{props.nickname}</h1>;
}
function App() {
 return (
 <div>
  <Name name="三水点靠木" />
  <Url url="https://3water.com/" />
  <Nickname nickname="3water" />
 </div>
 );
}
 
ReactDOM.render(
  <App />,
 document.getElementById('example')
);

输出结果:

实例讲解React 组件

以上就是实例讲解React 组件的详细内容,更多关于React 组件的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 #Javascript
详解React 元素渲染
Jul 07 #Javascript
JS数据类型判断的几种常用方法
Jul 07 #Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 #Javascript
jQuery 实现扁平式小清新导航
Jul 07 #jQuery
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 #Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 #Javascript
You might like
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
linux下php上传文件注意事项
2016/06/11 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
python如何修改装饰器中参数
2018/03/20 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
使用python实现画AR模型时序图
2019/11/20 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
巴西本土电商平台:Americanas
2020/06/21 全球购物
销售自荐信
2013/10/22 职场文书
学术诚信承诺书
2014/05/26 职场文书
法语专业求职信
2014/07/20 职场文书
公司离职证明范本
2014/10/17 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫