React之父子组件之间传值

  • Z时代
  • 2024-01-10
  • 分类：综合

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;

以上是 React之父子组件之间传值 的全部内容， 来源链接： utcz.com/z/381786.html

回到顶部