react----父子组件之间的参数传递

Posted Ethan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react----父子组件之间的参数传递相关的知识,希望对你有一定的参考价值。

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

 1 //父组件
 2 import React from ‘react‘;
 3 import ‘./header.css‘
 4 import ComponentChild from ‘./headerChild‘
 5 class ComponentHeader extends React.Component {
 6   constructor () {
 7     super()
 8     this.state = {
 9       username: ‘Song‘,
10       age: 18
11     }
12   }
13   render () {
14     return (
15       <div>
16         <ComponentChild name="dongdong"/>//子组件
17         <p>这是一个测试组件</p>
18         <p>{this.state.age}</p>
19       </div>   
20     )
21   }
22 }
23 export default ComponentHeader
24 
25 //子组件
26 import React from ‘react‘
27 class ComponentChild extends React.Component {  
28   render () {
29     return (
30       <div>
31         <p>{this.props.name}</p>//通过this.props.key来过去父组件传递过来的数据
32       </div>
33     )
34   }
35 }
36 export default ComponentChild

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

 1 //子组件
 2 import React from ‘react‘
 3 class ComponentChild extends React.Component {  
 4   render () {
 5     return (
 6       <div>
 7         <button>点击测试:<input type="text" onChange={this.props.handleChange}/></button>//通过函数的形式将参数传递给父组件
 8         <p>{this.props.name}</p>
 9       </div>
10     )
11   }
12 }
13 export default ComponentChild
14 
15 //父组件
16 import React from ‘react‘;
17 import ‘./header.css‘
18 import ComponentChild from ‘./headerChild‘
19 class ComponentHeader extends React.Component {
20   constructor () {
21     super()
22     this.state = {
23       username: ‘Song‘,
24       age: 18
25     }
26   }
27   handleChange (event) { // 这个函数是可以用来获取子组件传递过来的数据
28     this.setState({age:event.target.value})//使用setState将子组件传递过来的值,设置给父组件中的state
29   }
30   render () {
31     return (
32       <div>
33         <ComponentChild handleChange={this.handleChange.bind(this)} name="dongdong"/> //这里注意一定要使用bind(this)改变this的指向,否则会报错,显示找不到this
34         <p>这是一个测试组件</p>
35         <p>{this.state.age}</p>
36       </div>   
37     )
38   }
39 }
40 export default ComponentHeader

 这里面注意一点,state是属于组件的私有属性的,props属于外来属性

以上是关于react----父子组件之间的参数传递的主要内容,如果未能解决你的问题,请参考以下文章

React教程:父子组件传值(组件通信)

[react]7、组件间数据传递

React传递参数的多种方式

React 组件基本使用 ---父子组件之间的通信

react父子组件之间传值

React7.组件间的通讯