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 的 ...
随机推荐
- codeforces 940D 比赛总结
这次比赛总体还行,但是并没发挥到极致 A题 速度正常 题解 B题 这个题先是没注意时间复杂度,tle了,好不容易优化了没多测几组就交了,很开心的wa了,查了一边发现没特判k,改好后有草率地交了,又wa ...
- HTML/CSS 知识点
整个前端开发的工作流程 产品经理提出项目需求 UI出设计稿 前端人员负责开发静态页面(跟前端同步的后台人员在准备数据) 前后台的交互 测试 产品上线(后期项目维护) 互联网原理 当用户在浏览器输入网址 ...
- idea 打开自动编译以及查看Problem窗口
1.打开perference 2.选择Build-Compile-Make Project Automatically自动构建项目
- centos/linux下的安装mysql
1.从yum 下面下载mysql数据库 yum -y install mysql-server 2.查询该mysql是否安装完成 rpm -qa|grep mysql-server 出现如下图所示标明 ...
- .net mvc web api 返回 json 内容时过滤值为null的属性
1.响应内容(过滤前) {"msg":"初始化成功!","code":"","success":tr ...
- Microsoft+R:Microsoft R Open (MRO)安装和多核运作
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 本文转载于公众号大猫的R语言课堂,公众号作者使 ...
- php simpleXML操作xml的用法
XML简介 XML是一种流行的半结构化文件格式,以一种类似数据库的格式存储数据.在实际应用中,一些简单的.安全性较低的数据往往使用 XML文件的格式进行存储.这样做的好处一方面可以通过减少与数据库的交 ...
- free 或delete后指针怎么样了
free()和delete()只是把指针所指向的内存释放掉,但是并没有把指针本身删除,也没有把指针置为NULL; #include<iostream> using namespace st ...
- hi3531的pcie控制器使能
1. 关闭PCIe 控制器: 通过向系统控制寄存器PERIPHCTRL30[pcie0_app_ltssm_enabl]写入0 关闭PCIe0 控制 器. 通过向系统控制寄存器PERIPHCTRL77 ...
- dojo加载树报错
1.错误描述 error loading undefined children. TypeError:this._arrayOfTopLevelItems is undefied. 2.错 ...