React组件定义验证属性值和默认值的配置

在开发组件时一定需要传递数据来使用的,这时验证值类型是必不可少的。

reactjs也给我们提供了很多验证。在React.PropTypes对象来下来引用 如React.PropTypes.number验证数字。

验证列表http://www.reactjs.cn/react/docs/reusable-components.html

以下是我本地测试时的例子:

var SetIntervalMixin = {
			  componentWillMount: function() {
			    this.intervals = [];
			  },
			  setInterval: function() {
			    this.intervals.push(setInterval.apply(null, arguments));
			  },
			  componentWillUnmount: function() {
			    this.intervals.map(clearInterval);
			  }
		};

		var TickTock = React.createClass({
			  mixins: [SetIntervalMixin], // 引用 mixin
			  getInitialState: function() {
			    return {seconds: 0};
			  },
			  componentDidMount: function() {
			    this.setInterval(this.tick, 1000); // 调用 mixin 的方法
			  },
			  tick: function() {
			    this.setState({seconds: this.state.seconds + 1});
			  },
			  render: function() {
			    return (
			      <p>
			        React has been running for {this.state.seconds} seconds.
			      </p>
			    );
			  }
		});

		React.render(
		  <ticktock>,
		  document.getElementById('example')
		);
		setTimeout(function(){
			React.render(
			  <ticktock>,
			  document.getElementById('example2')
			);
		},1000)

</ticktock></ticktock>



组件propTypes对象用来定义prop对象属性的类型<br />
属性类型都从React.PropTypes.XX来引用<br />
也可以自定义,函数参数为props对象  属性引用名  组件的名,函数内判断内容是否符合要求,可做验证。如不行返回一个new Error()<br />
当定义了属性类型,运行时当有属性值时会判断是否合法, 未通过会在console里显示出来提示。<br />
getDefaultProps定义的默认值也会验证的。<br />
必需的属性和自定义的属性,未传递值也会验证提示的。其他类型的属性无值不会验证。<br />
也可以给children添加验证<br />

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 不一定。自定义组件属性可以是任何,包括父组件属性,也可以是其他来源的,例如组件自身的状态、全局状态等。通常情况下,自定义组件属性应该由父组件传入,以便父组件控制子组件的行为。但是,在某些情况下,自定义组件可能需要自己维护一些内部状态,例如一个输入框组件需要维护输入框中的文本内容,这时候就需要自定义组件自己管理这些状态。总之,自定义组件属性取决于组件的设计和需求,可以根据具体情况进行灵活处理。 ### 回答2: 不一定。自定义组件属性不一定要与父组件属性相同,可以是任意有效的。自定义组件属性是根据组件的设计和使用场景来确定的,可以通过父组件传入,也可以在组件内部进行设置。 自定义组件属性是用来控制组件的外部行为和样式的。当父组件在使用自定义组件时,通过给自定义组件传递属性,可以灵活地改变自定义组件的展示和行为。这样可以实现组件的复用和定制化。 当自定义组件属性不是默认值时,可以选择使用父组件属性来设置。这样可以方便父组件在使用自定义组件时指定属性,并根据需要对自定义组件进行定制。但是,也可以通过其他方式来设置自定义组件属性,比如在自定义组件内部进行逻辑判断或根据其他数据进行计算。 总之,自定义组件属性不是默认值时,并不一定要与父组件属性相同,可以根据需求进行灵活的设置。 ### 回答3: 不一定。自定义组件属性不是默认值时,该属性可以是父组件属性,也可以是其他的。在React中,父组件可以通过属性的方式向子组件传递数据,子组件可以根据接收到的属性来进行渲染和展示。如果自定义组件属性默认值,则使用的是默认值,如果不是默认值,则使用的是传递的属性。父组件可以根据需要选择传入哪些属性,并且可以根据需求修改传入的属性,子组件也可以根据接收到的属性进行相应的逻辑处理和展示效果的改变。所以,自定义组件属性不一定是父组件属性,可以是任何,但是通常是通过父组件传递过来的来决定。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值