react ( 二 )
ref属性
- 当我们在 react组件中要访问真实的DOM元素时,你可能需要用到ref属性,ref接收一个函数作为属性值,函数接收一个参数,这个参数就是真实的DOM元素。真实的DOM元素渲染到页面上之后,ref函数就会执行。
ReactDOM.render(
<div>
<input
{/* 这里的el就是原生的input元素 */}
ref={ (el)=> console.log( el ) }
/>
</div> ,
root
);
- ref属性也可以用在react组件上面,用在组件上时,ref函数接收的参数是组件的实例,(但是不建议这样做)。
ReactDOM.render(
<div>
<input
{/* 这里的el就是原生的input元素 */}
ref={ (el)=> console.log( el ) }
/>
</div> ,
root
);
- 当父组件需要获取子组件的DOM元素时,我们也可以利用 ref 接收父组件传的,把元素绑定到父组件
class App extends Component {
constructor(props) {
super(props);
this.child = null;
}
logEl = ()=>{
console.log( this.child ); //打印子组件的input元素
}
render(){
return (
<div>
{/* 传一个函数给子组件 */}
<Child
getEl={ (el)=> this.child = el }
/>
<button
onClick={ logEl }
>获取子组件元素</button>
</div>
);
}
}
class Child extends Component{
constructor(props) {
super(props);
}
render(){
let {getEl} = this.props;
return (
<div>
{/* 子组件的元素用ref接收父组件传来的函数,元素渲染到页面时,就绑定到了父组件的属性上面 */}
<input
ref={ getEl }
type="text"/>
</div>
);
}
};
组件受控和不受控
- 受控:
组件的状态变化,是 react 控制的 (大多数时候, 接受 state 和 props 的控制) - 不受控:
某些组件, 比如 input, select 这种组件,状态的变化可能是控件本身具有功能, 它状态的变化,并不是 react 控制的
让这类组件受控很简单:给一个 value 的属性, 这个时候,react 就接管了这个组件
默认参数 defaultProps
给属性声明默认值 , 值是 undefined 的时候才会启用
class App extends Component{
constructor(props){
super(props);
this.bb = 8;
}
// 默认参数: es6 的写法
static defaultProps = {
a: 'a 没有传',
b: 'b 没有传',
c: 'c 没有传',
d: 'd 没有传'
}
render(){
let {a,b,c,d} = this.props;
return (
<div>
<ul>
<li>{a}</li>
<li>{b}</li>
<li>{c}</li>
<li>{d}</li>
</ul>
</div>
)
}
}
//react的写法
// App.defaultProps={
// a: 'a 没有传',
// b: 'b 没有传',
// c: 'c 没有传',
// d: 'd 没有传'
// };
参数类型检测:propTypes
class App extends Component{
constructor(props){
super(props);
}
render(){
let {a,b,c,d} = this.props;
return (
<div>
<ul>
<li>a是字符串:{a}</li>
<li>b是数字:{b}</li>
<li>c是函数:{c()}</li>
</ul>
<p>{d.a}:{d.b}</p>
</div>
)
}
}
App.propTypes = {
a: PT.string,
b: PT.number.isRequired,
c: PT.func.isRequired,
d: PT.shape({
a: PT.string.isRequired,
b: PT.number.isRequired
})
}
App.defaultProps = {
b: '88879',
c: f=>f,
d: {}
}
ReactDOM.render(
<div>
<App
a="aaa"
b={12499}
c={ ()=><p>ppppp</p> }
/>
<br/>
<App
a="aaa"
// b={12499}
c={ ()=><p>ppppp</p> }
/>
<br/>
<App
a="aaa"
b={12499}
d={{
a: 'dfsj',
b: 999
}}
/>
<br/>
</div>
,
document.getElementById('root')
);
// 对开发有帮助
// 在开发的阶段用, 上线的时候需要移除验证的代码
// 默认属性也会参与数据验证
react ( 二 )的更多相关文章
- 手把手教你全家桶之React(二)
前言 上一篇已经讲了一些react的基本配置,本遍接着讲热更新以及react+redux的配置与使用. 热更新 我们在实际开发时,都有用到热更新,在修改代码后,不用每次都重启服务,而是自动更新.并而不 ...
- 深入理解React(二) —— 数据流和事件原理
版权声明:本文由左明原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/158 来源:腾云阁 https://www.qclou ...
- 正式学习react(二)
今天把上一篇还没学习完的 webpack部分学习完: 之前有说过关于css的webpack使用.我们讲了 ExtractTextPlugin 来单独管理css讲了module.loaders下关于 c ...
- 五分钟学习React(二):我的第一个Hello World
我的第一个React应用 接着我们上一期所讲的内容,通过create-react-app脚手架创建的应用,它是基于ES6的语法生成的.我们清空src目录下的文件,并分别创建index.js和index ...
- 细说React(二)
上篇文章主要介绍了React的基本用法,这次将介绍一个React路由组件—react-router. 在 web 应用开发中,路由系统是不可或缺的一部分.在浏览器当前的 URL 发生变化时,路由系统会 ...
- 对React的理解
转自:http://www.cocoachina.com/webapp/20150721/12692.html 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了R ...
- React 最简单的入门教程
一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual D ...
- 前端框架React Js入门教程【精】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
- 初始react
很久就期待学习react了,惰性,一直都没有去翻阅react的资料,最近抽空,简单的了解了一下react,先记录一下,后续慢慢的学习. 一.ReactJS简介 React 起源于 Facebook 的 ...
随机推荐
- 洛谷P1171 售货员的难题【状压DP】
题目描述 某乡有n个村庄(1 输入格式: 村庄数n和各村之间的路程(均是整数). 输出格式: 最短的路程. 输入样例: 3 0 2 1 1 0 2 2 1 0 输出样例 3 说明 输入解释 3 {村庄 ...
- mysql之mysql_config_editor
本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn mysql_config_editor允许你把登录的身份验证信息存储 ...
- Visual Studio 2017 Enterprise 发布 15.3.2 版,附离线安装包下载。
Visual Studio 2017 Enterprise 更新至 15.3.2 ,本安装包使用微软原版安装文件,配合layout指令全量下载后制作,内置中文语言包,包含 Visual Studio ...
- Java中的volatile的作用和synchronized作用
volatile该关键字是主要使用的场合是字啊多个线程中可以感知实例的变量被更改了并且可以获取到最新的值进行使用,也就是用多线程读取共享变量的时候可以获取到最新的值使用.不能保障原子性 如果你在jvm ...
- c++ 回调函数使用
普通回调 #include<stdio.h> void printWelcome(int len) { printf("welcome -- %d\n", len); ...
- LNMP安装后MYSQL数据库无法远程访问解决
解决思路: 之前也遇到过这个问题,解决的途径也是五花八门,从百度和Google上也看到各种解决方案,基本上分以下几种: 没有给root对应的权限 -- @'192.168.1.123'可以替换为@'% ...
- RegExp正则表达式规则以及常用正则表达式
html,body { font-family: "SF UI Display", ".PingFang SC", "PingFang SC" ...
- ACM==迷茫
写给迷茫的自己~~ 从家里来学校一周多了,没做几个题,也没学习新的算法,就这样迷茫地无所事事.有时我就在想我是不是真的喜欢算法?曾经自己定下的竞赛目标要置之不理吗? 我高中毕业于一个普通高中,在上大学 ...
- MAC地址表配置与绑定
MAC地址表分类 ---静态MAC地址表项由用户手工配置,表项不老化: ---黑洞MAC地址表项包括源黑洞MAC地址表项和目的黑洞MAC地址表项,用于丢弃含有特定源MAC地址或目的MAC地址的报文(例 ...
- 【转载】使用SDL播放YUV图像数据(转)
SDL提供了针对YUV格式数据的直接写屏操作.废话不多说,直接上代码吧/** * file showyuv.c * author: rare * date: 2009/12/06 * email: d ...