码迷,mamicode.com
首页 > 其他好文 > 详细

react组件之间的参数传递

时间:2017-09-04 19:54:48      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:组件   default   turn   inpu   com   child   rom   extend   def   

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组件之间的参数传递

标签:组件   default   turn   inpu   com   child   rom   extend   def   

原文地址:http://www.cnblogs.com/yirancao/p/7474996.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!