实例讲解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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
Cookie 注入是怎样产生的
Apr 08 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
Vue组件跨层级获取组件操作
Jul 27 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&amp;java(二)
2006/10/09 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
JQuery 常用操作代码
2010/03/14 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
Python中的True,False条件判断实例分析
2015/01/12 Python
Python合并多个装饰器小技巧
2015/04/28 Python
python动态参数用法实例分析
2015/05/25 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
python 剪切移动文件的实现代码
2018/08/02 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
安全教育第一课观后感
2015/06/17 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书