React之父子组件之间传值
1、新增知识点
/** React中的组件: 解决html 标签构建应用的不足。 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入。 父子组件:组件的相互调用中,我们把调用者称为父组件,被调用者称为子组件 父子组件传值(react 父子组件通信) 父组件给子组件传值 1.在调用子组件的时候定义一个属性 <Header msg='首页'></Header> 2.子组件里面 this.props.msg 说明:父组件不仅可以给子组件传值,还可以给子组件传方法,以及把整个父组件传给子组件,可以让子组件给父组件传值。 父组件主动获取子组件的数据 1、父组件调用子组件的时候指定ref的值 <Header ref='header'></Header> 2、父组件通过this.refs.header 获取整个子组件实例 (dom(组件)加载完成以后获取 ) defaultProps:父子组件传值中,如果父组件调用子组件的时候不给子组件传值,则可以在子组件中使用defaultProps定义的默认值 //当获取不到父组件的传值,选择默认值 Header1.defaultProps={ msg:"默认标题" } propTypes:验证父组件传值的类型 //检查父组件传过来的数据类型 Header1.propTypes={ num:PropTypes.number } 都是定义在子组件中 */
2、代码实例实现之子组件Header.js
import React from 'react'; /** * 父子组件传值 */ class Header extends React.Component{ constructor(props){ super(props); this.state={ msg:"header 内容" } } getMsg=()=>{ //this.props.news.getData(); // alert(this.props.news.state.msg) //执行父组件数据 this.props.news.getData(); //执行父组件方法并获取数据 } headerRun=()=>{ alert("这是Header组件run方法") } render() { return( <div> <h2>{this.props.title}</h2> <br/> {this.state.msg} <br/> <button onClick={this.props.run}>点击调用父组件的run方法</button> <br/> <button onClick={this.props.news.getData}>获取整个父组件方法</button> <br/> <button onClick={this.getMsg}>获取整个父组件定义数据</button> <br/> <button onClick={this.props.news.getChildData.bind(this,"我是子组件数据")}>子组件传值给父组件</button> </div> ) } } export default Header;
3、代码实例实现之父组件Home10.js
import React from 'react'; import Header from './Header'; /** React中的组件: 解决html 标签构建应用的不足。 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入。 父子组件:组件的相互调用中,我们把调用者称为父组件,被调用者称为子组件 父子组件传值(react 父子组件通信) 父组件给子组件传值 1.在调用子组件的时候定义一个属性 <Header msg='首页'></Header> 2.子组件里面 this.props.msg 说明:父组件不仅可以给子组件传值,还可以给子组件传方法,以及把整个父组件传给子组件,可以让子组件给父组件传值。 父组件主动获取子组件的数据 1、父组件调用子组件的时候指定ref的值 <Header ref='header'></Header> 2、父组件通过this.refs.header 获取整个子组件实例 (dom(组件)加载完成以后获取 ) */ class Home10 extends React.Component{ constructor(props){ super(props); this.state={ msg:"我是一个首页组件内容", title:"首页" } } run=()=>{ alert("这是Home10组件的run方法") } //获取子组件传过来的数据 getChildData=(result)=>{ alert(result); } getData=()=>{ alert("获取数据") } //父组件主动调用子组件数据和方法 getHeaderMethod=()=>{ alert(this.refs.header.state.msg); this.refs.header.headerRun(); } render() { return( <div> <br/> <Header title={this.state.title} run={this.run} news={this} ref="header"/> <hr/><br/> {this.state.msg} <br/> <hr/> <button onClick={this.getHeaderMethod}>获取子组件的数据</button> </div> ) } } export default Home10;
本文来自博客园,作者:小白啊小白,Fighting,转载请注明原文链接:https://www.cnblogs.com/ywjfx/p/10421948.html