实例讲解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 相关文章推荐
HTML DOM的nodeType值介绍
Mar 31 Javascript
javascript之bind使用介绍
Oct 09 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
Node.js fs模块原理及常见用途
Oct 22 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
模拟select的代码
2011/10/19 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
DOM 事件流详解
2015/01/20 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
2014年教研员工作总结
2014/12/23 职场文书
升职自荐信怎么写
2015/03/05 职场文书
求职简历自我评价范文
2015/03/10 职场文书
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android