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. codeforces 940D 比赛总结

    这次比赛总体还行,但是并没发挥到极致 A题 速度正常 题解 B题 这个题先是没注意时间复杂度,tle了,好不容易优化了没多测几组就交了,很开心的wa了,查了一边发现没特判k,改好后有草率地交了,又wa ...

  2. HTML/CSS 知识点

    整个前端开发的工作流程 产品经理提出项目需求 UI出设计稿 前端人员负责开发静态页面(跟前端同步的后台人员在准备数据) 前后台的交互 测试 产品上线(后期项目维护) 互联网原理 当用户在浏览器输入网址 ...

  3. idea 打开自动编译以及查看Problem窗口

    1.打开perference 2.选择Build-Compile-Make Project Automatically自动构建项目

  4. centos/linux下的安装mysql

    1.从yum 下面下载mysql数据库 yum -y install mysql-server 2.查询该mysql是否安装完成 rpm -qa|grep mysql-server 出现如下图所示标明 ...

  5. .net mvc web api 返回 json 内容时过滤值为null的属性

    1.响应内容(过滤前) {"msg":"初始化成功!","code":"","success":tr ...

  6. Microsoft+R:Microsoft R Open (MRO)安装和多核运作

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 本文转载于公众号大猫的R语言课堂,公众号作者使 ...

  7. php simpleXML操作xml的用法

    XML简介 XML是一种流行的半结构化文件格式,以一种类似数据库的格式存储数据.在实际应用中,一些简单的.安全性较低的数据往往使用 XML文件的格式进行存储.这样做的好处一方面可以通过减少与数据库的交 ...

  8. free 或delete后指针怎么样了

    free()和delete()只是把指针所指向的内存释放掉,但是并没有把指针本身删除,也没有把指针置为NULL; #include<iostream> using namespace st ...

  9. hi3531的pcie控制器使能

    1. 关闭PCIe 控制器: 通过向系统控制寄存器PERIPHCTRL30[pcie0_app_ltssm_enabl]写入0 关闭PCIe0 控制 器. 通过向系统控制寄存器PERIPHCTRL77 ...

  10. dojo加载树报错

    1.错误描述    error loading undefined children.    TypeError:this._arrayOfTopLevelItems is undefied. 2.错 ...