React 父子组件之间数据传递 实用 - lbx

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lbx_15887055073/article/details/83344484

父组件通过属性的方式向子组件传值,子组件通过函数回调的方式向父组件传值。

一、父组件向子组件传值

案例一:
父组件:

<PageTitle title="测试页面标题" />

子组件:

<div>{this.props.title}</div>

注:父组件中的 title 和子组件中的 this.props.title 对应,props表示接收从父组件传过来的值。

案例二:
父组件:

<List list={this.state.list} />

子组件:

render() {
        let listBody = this.props.list.map((item, index) => {
            return (
                <div className="item" key={index}>
                    <a href="JavaScript:;">{item.title}</a>
                </div>
            );
        });
        return (
            <div className="box">
                {listBody}
            </div>
        );
    }
}

二、子组件向父组件传值

案例一:
父组件:

//接收从子组件传回来的值
onClickGetItem(item) {
	console.log(item);
}
render() {
        return (
            <div>
                <List list={this.state.list} onPropsClickHandle = {(item) => this.onClickGetItem(item)}/>
            </div>
        );
    }

子组件:

render() {
        let listBody = this.props.list.map((item, index) => {
            return (
                <div className="item" key={index}>
                    <a href="JavaScript:;" onClick={() => {this.props.onPropsClickHandle(item)}}>{item.title}</a>
                </div>
            );
        });
        return (
            <div className="box">
                {listBody}
            </div>
        );
    }

说明:子组件中使用 this.props.onPropsClickHandle 调用父组件的方法,并把参数传到父组件,其中onPropsClickHandle与父组件中绑定的方法对应,onClickGetItem 为父组件接收参数的方法。

案例二:
父组件:

//接收从子组件传回来的值
onGetInputValue(item) {
	console.log(item);
}
render() {
        return (
            <div>
				<Search onPropsChangeHandle={this.onGetInputValue.bind(this)}/>
            </div>
        );
    }

子组件:

return (
	           <div className="box">
	               关键字:
	               <input onChange={(e) => {this.props.onPropsChangeHandle(e.target.value)}} />
	           </div>
		 );

说明:子组件中使用 this.props.onPropsChangeHandle 调用父组件的方法,并把参数传到父组件,其中onPropsChangeHandle 与父组件中绑定的方法对应,onGetInputValue 为父组件接收参数的方法。

展开阅读全文

父子组件数据传递

06-21

<p style="color:#333333;">n <span style="font-size:16px;"><strong>课程说明</strong></span>n</p>n<p style="color:#333333;">n React这个前端框架,学习路线非常陡峭,也就是说难度挺大。n</p>n<p style="color:#333333;">n 所以导致很多w3cschool的小伙伴都对这个框架有点害怕,从而不学这个框架,这是一个非常错误的举动。n</p>n<p style="color:#333333;">n React在国外的普及率非常高,由此可见这个框架的强大。n</p>n<p style="color:#333333;">n 而忠彬讲师的《React快速入门指南》则会由浅入深,从非常基础的部分开始讲解React的入门。n</p>n<p style="color:#333333;">n 这是一套非常适合React这个框架入门的课程,学习这个课程一定能够各位小伙伴学有所获。n</p>nn 为什么学Reactnn<p style="color:#333333;">n Vue、Angular、React是目前最主流的三大前端框架,React便是其中的佼佼者。n</p>n<p style="color:#333333;">n 在很多的企业招聘信息中,你都会看到React的身影,可见,所有的前端初学者、开发者,已经到了不得不学习它的时刻。n</p>nn 课程特点nn<p style="color:#333333;">n 1. 知识点与实战相结合;n</p>n<p style="color:#333333;">n 2. 缓和React学习路线陡峭的问题;n</p>n<p style="color:#333333;">n 3. 讲师思路清晰,教学风格不失风趣幽默;n</p>n<p style="color:#333333;">n 4. 疑问式教学,更适合新手学员;n</p>nn 学习建议nn<p style="color:#333333;">n 1. 看完一个章节,再动手练习,最好别边学边练;n</p>n<p style="color:#333333;">n 2. 做好笔记,用于学完课程后的查缺补漏;n</p>

没有更多推荐了,返回首页