相思资源网 Design By www.200059.com

1、父组件向子组件传递参数

class Child extends Component {
    componentDidMount(){
      let name = this.props.default;
      console,log(name);
    }
    render(){
      const { default} = this.props;
      return (
        <Input />
      )
   }
}
import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
  state = {
    name: 'Bob'
  }
  render() {
    return (
      <div>
        <Child default={this.state.name} />
      </div>
    )
  }
}

2、子组件向父组件传递参数

class Child extends Component {
    state={
      name:'Bob'
    }
    componentDidMount(){
      this.props.toParent(this.state.name);
    }
    render(){
      return (
        <Input />
      )
   }
}
import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
   state = {
    name:''
  }
  getChildInfo = (name)=>{
     this.setState({name:name});
   }
  render() {
    return (
      <div>
        <Child toParent={this.getChildInfo.bind(this)} />
      </div>
    )
  }
}

以上这篇基于react组件之间的参数传递(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

标签:
react,组件传递参数

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“基于react组件之间的参数传递(详解)”

暂无基于react组件之间的参数传递(详解)的评论...