一.state和props
这里首先说一下概念,props一般属于父组件,然后getDefaultProps是设置默认props,如果父组件没有给某个prop那就用默认的,getInitialState是设置组件mount以后的初始state的。
state属于组件内部属性,是会频繁修改的,每次state值的改变都会导致components从 当前状态进入update阶段,从而重新render,当子组件继承了父组件 自然就继承了父组件里面所有方法。
·prop用于定义外部接口,state用于记录内部状态;
·prop的赋值在外部世界使用组件时,state的赋值在组件内部;
·组件不应该改变prop的值,而state存在的目的就是让组件来改变的。
二. 组件传值和读值
class Details extends React.Component {
constructor(props) {
super(props);
this.Sort=this.Sort.bind(this)
this.state = {
value: props.initValue || 0
}
}
-
外部传内部
父组件传给子组件用props传值,子组件通过访问props可以读到父组件传进来的值;读取prop值,需要在子组件的构造函数里面第一行通过`super调用父类的构造函数(React.Component),只有这样组件被构造后,类实例的所有成员函数才可以通过this.props访问父组件传递过来的props值。主要是在构造函数中通过参数props获得传入的prop值,并且在构造函数中可以进行this执行环境的绑定。
//子组件在父组件中使用,传入props值,data和typename
<Tagconnect data={result} typename="log_type"/>
//子组件中接收这个props值
class Tagconnect extends React.Component{
render(){
return(
this.props.data===undefined?<div>无数据</div>: <div className={this.props.typename}>有数据</div>
)
}
}
-
内部传外部
子组件传值给父组件,依然是通过prop,将函数赋予prop,此时相当于父组件给予子组件一个回调函数,子组件调用函数可以把内部信息传递给外部
//这里是子组件的定义 通过handleSearch函数内调用this.props.callback(value)函数将value这个值传给外部callback函数,外部有对应的回调函数
//可以接受到这个值
class NormalLoginForm extends React.Component{
handleSearch=(value)=> {
if(value===""){
return
}
this.props.callback(value);//调用外部回调函数
};
render(){
return (
<Search
placeholder="一键搜"
onSearch={value=>this.handleSearch(value)}
/>
)
}
}
<ImeiForm callback={this.searchImei.bind(this,Config.homepageIMEISearch)}/>//这里是子组件在父组件中的使用
//这里是父组件中的回调函数
searchImei=(config,value)=>{
console.log(value)//得到子组件中的value值
}