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 构建的单页面应用中,要 ...
随机推荐
- 高可用OpenStack(Queen版)集群-1. 集群环境
参考文档: Install-guide:https://docs.openstack.org/install-guide/ OpenStack High Availability Guide:http ...
- 我对BP网络的简单的理解
最近在学习tf的神经网络算法,十多年没有学习过数学了,本来高中数学的基础,已经彻底还给数学老师了.所以我把各种函数.公式和推导当做黑盒子来用,理解他们能做到什么效果,至于他们是如何做到的,暂时不去深究 ...
- iOS静默推送(Silent Remote Notifications)
此功能是iOS7新增加的功能,允许应用收到通知后在后台(background)状态下运行一段代码,可用于从服务器获取内容更新. 普通推送:收到推送后(有文字有声音),点开通知,进入APP后,才执行-- ...
- Backlog和冲刺结果以及产品Demo市场调研
Backlog和第一阶段冲刺结果以及产品Demo 博客停更了一段时间,但是我们团队没有闲着,现在一次性汇报团队工作进度,Backlog和第一阶段冲刺结果以及产品Demo. 在一段时间的分工合作以及调整 ...
- 第一个spring冲刺
第一天商量讨论出我们选择的题目为四则运算,虽然在上一个学期已经做过了,但是还有完善的地方,希望能够做出创新,另外下面的燃尽图是我们预测的3个阶段的进度,按情况不同可能实际的情况也不同,但是我们会尽量跟 ...
- 树莓派与Arduino Leonardo使用NRF24L01无线模块通信之基于RF24库 (四) 树莓派单子节点查询
考虑到项目的实际需要,树莓派作为主机,应该只在需要的时候查询特定节点发送的数据,因此接收到数据后需要根据头部判断是否是自己需要的数据,如果不是继续接收数据,超过一定时间未查询到特定节点的数据,则退出程 ...
- 6/7 sprint2 看板和燃尽图的更新
- Internet History, Technology and Security (Week 4)
Week 4 History: Commercialization and Growth We are now moving into Week 4! This week, we will be co ...
- ORACLE:一列的多行数据拼成字符串
查询表中的一个字段,返回了多行,就把这么多行的数据都拼成一个字符串. 例: id name 1 aa 2 bb 3 cc 要的结果是&quo ...
- js ajax 1
var xmlHttpReq = null; //声明一个空对象用来装入XMLHttpRequest if (window.ActiveXObject){//IE5 IE6是以ActiveXObjec ...