Webpack + React 开发 03 props
React中组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,比如 <HelloWorld name="John"> ,就是 HelloWorld 组件加入一个 name 属性,值为 John。和直接使用 <div name="John"> 不同,React组件被渲染出来之后,在渲染之后的dom节点中是不能直接看得到 name 属性的,怎么获取呢?组件的属性可以在组件类的 this.props 对象上获取,比如 name 属性就可以通过 this.props.name 读取。
添加组件属性,有一个地方需要注意,就是 class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。
this.props.children
this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点;
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
}); render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.getElementById('testDiv')
);
渲染之后的dom节点内容如下:
<ol data-reactroot="">
<li><span>hello</span></li>
<li><span>world</span></li>
</ol>
其中NodeList还可以改写成:
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
(this.props.children).map((child, index) => {
return <li key={index}>{child}</li>;
})
}
</ol>
);
}
});
需要注意的是这样写最好给li标签添加一个key属性,react建议这样做。
This is a suggestions of reactjs to improve the rendering performance. By providing a unique key for each dynamically created element,
it is possibile to minimize possible DOM changes.
如果没添加key,则会报如下的警告信息:
Each child in an array or iterator should have a unique "key" prop.
参考自 stackoverflow
上面代码的 NoteList 组件有两个 span 子节点,它们都可以通过 this.props.children 读取;
这里需要注意, this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array 。所以,处理 this.props.children 的时候要小心。
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法,请参考官方文档。
Protypes
组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求
class MyTitle extends React.Component {
propTypes() {
return {
title: React.PropTypes.string.isRequired
};
} render() {
return (<div> {this.props.title} </div>);
}
}
也可以使用 createClass 的方式,和上面有一点区别;
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
}, render: function() {
return <h1> {this.props.title} </h1>;
}
});
Mytitle组件有一个title属性。PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串,如果设置成其它类型值,则会出错。
此外,getDefaultProps
方法可以用来设置组件属性的默认值。
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
}, render: function() {
return <h1> {this.props.title} </h1>;
}
});
...this.props
组件的 props 是设置到具体组件上的属性 <ComponentA name='ccf'>IM</ComponentA>,像是这样的一个组件,就有一个name属性和一个children属性,其中children为字符串 'IM';
在定义组件的时候可以通过...this.props
var Inner = React.createClass({
render: function() {
return <div {...this.props}></div>
}
}); // ...
<Inner age="">ABCDE</Inner>
//
更多 propTypes 参考官方文档。
Webpack + React 开发 03 props的更多相关文章
- Webpack + React 开发 01 HelloWorld
1.项目依赖 安装所需要依赖的其它第三方开源库,项目依赖如下: "dependencies": { "babel-core": "^6.21.0&qu ...
- 从零开始搭建webpack+react开发环境
环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 webpack-dev-server@3.1.4 react@16.3.2 babel-core@6.26.3 bab ...
- 搭建 webpack + React 开发环境
说在开头 上个月断断续续的在研究webpack的配置,但是很多网上的文章基本上都是只说了开发环境的配置,而忽略了生产环境的配置.大致研究了一下门路,然后就来写一篇随笔让自己能在以后能有个地方可以做参考 ...
- Webpack + React 开发 02 JSX 语法
HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写: render(<h1>Hello Wor ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- webpack+react+es6开发模式
一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
- Webpack+React配合开发
前面两篇关于webpack的基础和进阶,请先务必阅读之前的文章. Webpack教程一 Webpack教程二 什么是React React是一个由Facebook开发的library,它的口号是“A ...
- webpack+react+redux+es6开发模式---续
一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...
- 搭建 webpack、react 开发环境(三)
配置 react-router-dom 我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的,所以我们需要一个在多个“页面”中跳转的功能,在使用 React 构建的单页面应用中,要 ...
随机推荐
- 记一次centos6升级salt-minion启动失败的问题
记一次centos6升级salt-minion启动失败的问题 作者:耀耀 blog:https://www.liuyao.me 一.起因 升级Salt-minion后 使用/etc/init.d/sa ...
- React Native iOS 离线包
平时使用React Native 时候, js代码和图片资源运行在一个Debug Server上(需要cd 到RN目录,然后终端执行 npm start 命令开启本地服务 ).每次更新代码之后只需要使 ...
- TeamWork#3,Week5,Bing Input Method vs Sogou Input Method
现在电脑上用五笔的用户越来越少了,好的拼音输入法也是难求.必应输入法的前身英库拼音输入法来自微软亚洲研究院的多项基础研究成果.最新的必应输入法不仅保留了英库拼音输入法的各项优势,还结合了必应的搜索体验 ...
- 第二阶段Sprint6
昨天:设置统一保存路径为内存卡,实现可以选择播放已有的视频 今天:将“录制”及“保存”整合到一起,修复出现的Bug,使之能够正常运行. 遇到的问题:感觉调的摄像头录制的画面不好,这怎么办啊?
- Task 6.3 冲刺Two之站立会议2
今天主要将聊天的主界面加以改善,添加了用户登陆后的提示,实现了好友的增删和查询以及自己的账号的个人信息,也可以使用户实现对自己的头像以及个性签名.个人信息等的管理.
- c#学习路线及目录导航
一 很久前的想法 转眼间,2018年已经过了四分之一,从我进入学校选择计算机专业到现在工作,已经过去了4年之久了.这一路走来经历了很多的曲折,对软件开发这个职业有了许多新的认识,我主要是从事NET领域 ...
- bata3
目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...
- Shiro异常1:java.lang.IllegalArgumentException: Line argument must contain a key and a value. Only one
按照开涛shiro的事例 ,老是出这个异常 原因在于ini文件格式错误,为什么我也不知道 我是这样改的:找到其他可以的(换行的时候能右移两下的)在换行处复制粘贴得到那个格式,新建一个ini文件,把刚刚 ...
- quartusII13.0使用教程
1.新建工程项目,填写项目存储路径和工程名,不要出现中文路径 2.添加已存在文件(可选),在[File name]下选择已经存在的工程项目,利用[Add]或[Add all]命令添加文件到新工程,点击 ...
- Alpha阶段综合报告
1.版本测试报告 1.1在测试过程中总共发现了多少Bug?每个类别的Bug分别为多少个? Bug分类 Bug内容 Fixed 编辑博文时改变文字格式会刷新界面 Can’t reproduced 无 N ...