React组件proptypes, ref
2024-09-04 09:37:51
一、使用props.children访问嵌套数据
import React from 'react';
class Button extends React.Component {
render () {
return (
<Element>I <Like /> React</Element>
)
}
}
const Element = (props) =>
<button>{ props.children }</button>
class Like extends React.Component {
render () {
return (
<span> ♥ </span>
)
}
}
export default Button;
通过props.children不仅拿到了自身的文本，而且拿到了<Like>中的内容。
二、自定义propTypes验证子组件props
import React from 'react';
class Check extends React.Component {
render () {
return (
<Title />
)
}
}
const Title = (props) =>
<h2>the Title: { props.title }</h2>
Title.propTypes = {
title(props, propName,component) {
// 验证是否为空
if (!(propName in props)) {
return new Error(`missing ${propName}`)
}
// 验证属性值的长度
if (props[propName].length < 6) {
return new Error(`the ${propName} is too short.`)
}
}
}
export default Check
对代码做如下修改：
即可消除报错信息。
2. 类型校验
上述代码运行后会报错
代码修改：
报错消失。
如果是类声明组件，使用下面的代码进行验证：
class Element extends React.Component {
const propTypes = {
color: PropTypes.String.isRequired
}
//........
}
四、默认props值 defaultProps
上述代码不会产生报错，因为设置了defaultProps.
五、ref获取特定组件的引用
下面定义了两个span,想要分别对应两个不同的<input />标签中的内容。
import React from 'react';
import ReactDOM from 'react-dom' class Twins extends React.Component {
constructor () {
super();
this.state = {
a: '',
b: ''
}
}
update (e) {
this.setState({
a: ReactDOM.findDOMNode(this.a).value,
b: ReactDOM.findDOMNode(this.b).value
})
} render () {
return (
<div>
<Input
ref={component => this.a = component}
update={this.update.bind(this)} />
<span>{this.state.a}</span>
<hr></hr>
<Input
ref={component => this.b = component}
update={this.update.bind(this)} />
<span>{this.state.b}</span>
</div>
)
}
} class Input extends React.Component {
render () {
return (
<input type='text' onChange={this.props.update} />
)
}
}
export default Twins
注意：这里Input一定要以class形式定义。
方法二：constructor中声明容器对象
this.myRef = React.createRef();
将其赋给特定对象。由于react自身的机制，接受ref的组件会把自己添加到容器中。
<AddForm ref={this.myRef} />
通过this.myRef.current即可获取特定子组件中的属性。
最新文章
- Django（4）html模板继承、模板导入、分页实现
- 简单的描述Java中的构造函数，及访问修饰符
- SVN里常见的图标及其含义
- Hadoop YARN资源隔离技术
- 初学web开发——怎么解决无法找到路径的问题
- 第三方开源框架的下拉刷新列表（QQ比较常用的）。
- jQuery.on() 函数详解
- Java中的变量与变量的作用域
- Asp.Net MVC4.0 官方教程 入门指南之四--添加一个模型
- PPTPD服务端搭建
- 最小化安装Linux记录
- 一篇不错的Gibbs Sampling解释文章，通俗易懂
- [Upper case conversion ] 每个单词的首小写字母转换为对应的大写字母
- POJ 3167 Layout（差分约束）
- [Kaggle] dogs-vs-cats之制作数据集[1]
- 面试(I)
- 每10秒执行定时任务-crontab
- AngularJS中ui-router全攻略
- 传统DNS的问题与HTTPDNS
- jdreact转换为H5注意事项