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 ( 二 )的更多相关文章

  1. 手把手教你全家桶之React(二)

    前言 上一篇已经讲了一些react的基本配置,本遍接着讲热更新以及react+redux的配置与使用. 热更新 我们在实际开发时,都有用到热更新,在修改代码后,不用每次都重启服务,而是自动更新.并而不 ...

  2. 深入理解React(二) —— 数据流和事件原理

    版权声明:本文由左明原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/158 来源:腾云阁 https://www.qclou ...

  3. 正式学习react(二)

    今天把上一篇还没学习完的 webpack部分学习完: 之前有说过关于css的webpack使用.我们讲了 ExtractTextPlugin 来单独管理css讲了module.loaders下关于 c ...

  4. 五分钟学习React(二):我的第一个Hello World

    我的第一个React应用 接着我们上一期所讲的内容,通过create-react-app脚手架创建的应用,它是基于ES6的语法生成的.我们清空src目录下的文件,并分别创建index.js和index ...

  5. 细说React(二)

    上篇文章主要介绍了React的基本用法,这次将介绍一个React路由组件—react-router. 在 web 应用开发中,路由系统是不可或缺的一部分.在浏览器当前的 URL 发生变化时,路由系统会 ...

  6. 对React的理解

    转自:http://www.cocoachina.com/webapp/20150721/12692.html 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了R ...

  7. React 最简单的入门教程

      一看就懂的ReactJs入门教程(精华版)   现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual D ...

  8. 前端框架React Js入门教程【精】

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  9. 初始react

    很久就期待学习react了,惰性,一直都没有去翻阅react的资料,最近抽空,简单的了解了一下react,先记录一下,后续慢慢的学习. 一.ReactJS简介 React 起源于 Facebook 的 ...

随机推荐

  1. 华为云照片的爬虫程序更新(python3.6)

    一.背景: 每年终都有一个习惯,就是整理资料进行归档,结果发现手机照片全备份在华为云里,在官网上找了一圈,没找到官方的pc工具用来同步照片. 于是找出上次写的程序,看看能不能爬到数据,然而……果然不好 ...

  2. header 头各种类型文件下载

    function down_file($url,$type='application/zip'){     header("Cache-Control: public");     ...

  3. 【学习笔记】Hibernate 一对一关联映射 组件映射 二级缓存 集合缓存

    啊讲道理放假这十天不到啊 感觉生活中充满了绝望 这就又开学了 好吧好吧继续学习笔记?还是什么的 一对一关联映射 这次我们仍然准备了两个表 一个是用户表Users 一个是档案表Resume 他们的关系是 ...

  4. 基于Jquery+Ajax+Json+存储过程 高效分页

    在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...

  5. c++实现一个小算法

    题目:有n个格子,每个格子里有坦克,坦克有两滴血,你向格子里投掷炸弹,每次命中坦克他掉一滴血并随机像左或者右移动一个格子,问最少炸几次能把全部坦克炸完. 题解:先向偶数格子投掷炸弹,所有的坦克全跑到奇 ...

  6. linux开放80 端口

    1.使用su登录管理员用户 2.编辑防火墙配置文件 vim /etc/sysconfig/iptables 3.在里面加入后保存 #open port 80 -A INPUT -p TCP -m st ...

  7. js中boolean类型的理解

    <html> <head> <script type="text/javascript"> var x="12"; aler ...

  8. the c programing language 学习过程2

    manipulated 操纵  notations符号 hexadecimal十六进制 precision精度 be concatenated at 把····联系起来 enumerations枚举  ...

  9. 常用的CSS框架

    常用的CSS框架 之前在写自己的个人网站的时候,由于自己Web前端不是特别好,于是就去找相关的CSS框架来搭建页面了. 找到以下这么一篇文章(列出了很多常用的CSS框架): http://w3scho ...

  10. 情景linux--如何优雅地退出telnet

    情景linux--在脚本中如何优雅地退出telnet 情景 telnet命令是TELNET协议的用户接口,它支持两种模式:命令模式和会话模式.虽然telnet支持许多命令,但大部分情况下,我们只是使用 ...