初学react笔记

标签：end   nec   col   ...   button   检查   com   color   reac   

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

}

初学react笔记

标签：end   nec   col   ...   button   检查   com   color   reac   

原文地址：https://www.cnblogs.com/yuan-luo/p/8945290.html