初学react笔记

最新推荐文章于 2025-08-09 20:51:19 发布

weixin_33736048

最新推荐文章于 2025-08-09 20:51:19 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yuan-luo/p/8945290.html

本文介绍了React组件中的prop和state概念，详细解释了如何定义、使用prop，并通过实例展示了prop的赋值、读取及propTypes检查的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React组件数据分为两种，prop、state，无论随改变了，都会引发组件重新渲染，而prop是组件对外接口，state是组件对内接口。

一、React的prop

1、给prop赋值：

import SampleButton from "............."

<SampleButton id="sample" borderWidth={2}

　　onClick={onButtonClick} style={{color:"red"}}

创建了SampleButton组件，使用了名字分别为id、borderWidth、onClick、style的prop。

2、读取prop值：

class SampleButton extends Componeconstructor(props) {　　super(props);//调用父类构造　　this.state = {

　　　　id:prop.id || "sample",
　　　　borderWidth:prop.borderWidth || 0,
　　　　style:prop.style || {color:"red"}
　　}
}

render(){
　　const {id, borderWidth,style} = this.props;
　　return(){
　　　　<div style={style} id={id}>
　　}

}

3、propTypes检查 //正式上线一般去掉，只是在开发中使用

SampleButton.propTypes = {

　　id:PropTypes.string.isRequired,//必须传

　　style:PropTypes.object,//可不传

　　borderWidth:PropTypes.number.isRequired

}

转载于:https://www.cnblogs.com/yuan-luo/p/8945290.html