React组件的传值

一.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值
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,723评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,003评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,512评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,825评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,874评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,841评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,812评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,582评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,033评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,158评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,789评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2 352

推荐阅读更多精彩内容

  • 空调出现问题,原本定的3P和1.5P的9000一套,商家发错,变成1.5和2.还好发现了,及时协商调换。可能要加两...
    泪言丫头阅读 146评论 0 0
  • 妈妈的老手艺,自己慢慢的学到了! 从小到大,一直喜欢吃菜馍,尤其是老南瓜丝做的,特好吃,偶尔也会吃白菜心做的。 学...
    爱生活的姜太公阅读 739评论 3 2
  • 这周出差外地一整周,明明记得周末要交作业,就是没抽出时间来写作。记得一位战友说过“如果每周一篇的作业靠坚持才能完成...
    MAXWELLL阅读 181评论 0 0