React中父子组件传值

 1 import React from ‘react‘; 
 2 import Son1 from ‘./Son1‘;
 3 class Father extends React.Component{
 4     constructor(){
 5         super();
 6        
 7     }
 8     render(){
 9         return(
10             <React.Fragment>
11                 {/* 我们在这里引入子组件 并声明一个属性str  给他传一个hello */}
12                 <Son1 str=‘hello‘></Son1>
13             </React.Fragment>
14         )
15     }
16 
17 }
18 export default Father;

 1 import React from ‘react‘;
 2 class Son1 extends React.Component{
 3     constructor(){
 4         super()
 5     }
 6 
 7     render(){
 8         return(
 9             <React.Fragment>
10                 {/* 子组件通过props 这个属性来接受父组件传过来的str */}
11                 {this.props.str}
12             </React.Fragment>
13         )
14     }
15 
16 }
17 export default Son1;

 1 import React from ‘react‘;  
 2 import Son1 from ‘./Son1‘;
 3 class Father extends React.Component{
 4     constructor(){
 5         super();
 6        
 7     }
 8     // 1、在这里中声明一个函数，用于接收子组件的传值
 9     message(msg){
10         // 通过形参接受到子组件的值并打印到控制台  
11         console.log(msg)
12     }
13     render(){
14         return(
15             <React.Fragment>
16               {/* 在这里声明一个msg属性，通过组件属性的方法，把函数传递给子组件 */}
17                 <Son1 msg={this.message}></Son1>
18             </React.Fragment>
19         )
20     }
21 
22 }
23 export default Father;

 1 import React from ‘react‘;
 2 class Son1 extends React.Component{
 3     constructor(){
 4         super()
 5     }
 6     render(){
 7         return(
 8             <React.Fragment>
 9             {/* 在子组件中通过props属性调用父组件的函数，并通过参数传值 */}
10                 {this.props.msg(‘hello Word‘)}
11             </React.Fragment>
12         )
13     }
14 
15 }
16 export default Son1;