React父子组件:间传值

一.父组件向子组件传值

父组件（Father）

子组件(Children)

二.子组件向父组件传值

父组件（Father）

子组件(Children)

父组件（Father代码）

1.  
   import React, {Component} from 'react';
2.  
   import { withRouter } from 'react-router-dom';
3.  
   const Children = React.lazy(() => import('./../Children'));
4.  
   class Father extends Component{
5.  
   state = {
6.  
   info: 'hello'
7.  
   }
8.  
   handleChangeName=(name)=>{
9.  
   this.setState({info: name})
10.  
    }
11.  
    render(){
12.  
    return (
13.  
    <div>
14.  
    {this.state.info }
15.  
    <Children handleChange={ this.handleChangeName } />
16.  
    </div>
17.  
    )
18.  
    }
19.  
    }
20.  
    export default withRouter(Father);

 子组件(Children代码)

1.  
   import React, {Component} from 'react';
2.  
   import { withRouter } from 'react-router-dom';
3.  
   class Children extends Component{
4.  
   handleClik=()=>{
5.  
   const { handleChange } = this.props
6.  
   handleChange('萝莉')
7.  
   }
8.  
   render(){
9.  
   return (
10.  
    <div>
11.  
    <div onClick={ this.handleClik } > { this.props.name }点击改变name </div>
12.  
    </div>
13.  
    )
14.  
    }
15.  
    }
16.  
    export default withRouter(Children);

这篇好文章是转载于：学新通技术网