欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

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

时间:2021-03-08 11:40:15|栏目:JavaScript代码|点击:

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>
    )
  }
}

上一篇:js 重构Array的sort排序方法

栏    目:JavaScript代码

下一篇:JS 屏蔽键盘不可用与鼠标右键不可用的方法

本文标题:基于react组件之间的参数传递(详解)

本文地址:http://www.codeinn.net/misctech/76808.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有