react 子传参父_React 子组件给父组件传值、整个组件、方法

一、准备工作

1.定义一个父组件，名字为Parent

/src/component/Parent.js

import React, {Component} from 'react'

export default class Parent extends Component {

constructor(props) {

super(props)

this.state = {

name: '我是父组件',

msg: '父组件传值给子组件'

}

}

render() {

return (

{ this.state.name }

)

}

}

2.定义一个子组件 ，名字为Children

/src/component/Children.js

import React, {Component} from 'react'

export default class Children extends Component {

constructor(props) {

super(props)

this.state = {

name: '我是子组件',

msg: '子组件传值给父组件'

}

}

render() {

return (

{ this.state.name }

)

}

}

3.先在App.js里引入父组件Parent

/src/App.js

import React from 'react';

import Parent from './component/Parent'

function App() {

return (

);

}

export default App;

运行项目：

编译成功

界面如图所示，http://localhost:3000/

4.父组件Parent引入子组件Children

import React, {Component} from 'react'

import Children from './Children'

export default class Parent extends Component {

constructor(props) {

super(props)

this.state = {

name: '我是父组件',

msg: '父组件传值给子组件'

}

}

render() {

return (

{ this.state.name }

我要引入子组件了：

---

)

}

}

已成功引入子组件

二、子组件Children传值(msg)给父组件Parent

子组件传值给父组件的步骤：

父组件在调用子组件时，传入一整个组件给子组件

父组件中定义一个方法getChildrenMsg(resulet, msg)，用来获取子组件传来的值以及执行其他操作

子组件在通过this.props来获取到一整个组件this.props.parent或者this.props[parent]

子组件调用父组件步骤2里定义的方法，通过bind绑定传值

Parent:

import React, {Component} from 'react'

import Children from './Children'

export default class Parent extends Component {

constructor(props) {

super(props)

this.state = {

name: '我是父组件',

msg: '父组件传值给子组件',

childrenMsg: ''

}

}

getChildrenMsg = (result, msg) => {

// console.log(result, msg)

// 很奇怪这里的result就是子组件那bind的第一个参数this，msg是第二个参数

this.setState({

childrenMsg: msg

})

}

render() {

return (

{ this.state.name }

子组件传来的值为：{ this.state.childrenMsg }

我要引入子组件了：

---

)

}

}

Children:

import React, {Component} from 'react'

export default class Children extends Component {

constructor(props) {

super(props)

this.state = {

name: '我是子组件',

msg: '子组件传值给父组件'

}

}

toParent = () => {

// console.log(this.props.parent.getChildrenMsg.bind(this, this.state.msg))

this.props.parent.getChildrenMsg(this, this.state.msg)

}

render() {

return (

{ this.state.name }

子组件传入给父组件

)

}

}

三、子组件Children给父组件Parent传一整个组件(父组件获取整个子组件)

子组件给父组件传一整个组件(父组件获取整个子组件)的步骤：

父组件在调用子组件时，通过ref属性，拿到整个子组件

父组件中通过this.refs.children或者this.refs[children]获取到一整个子组件实例(注意，要在DOM加载后才能获取)

Parent:

import React, {Component} from 'react'

import Children from './Children'

export default class Parent extends Component {

constructor(props) {

super(props)

this.state = {

name: '我是父组件',

msg: '父组件传值给子组件',

childrenMsg: ''

}

}

getChildrenMsg = () => {

this.setState({

childrenMsg: this.refs['children'].state.msg

})

}

render() {

return (

{ this.state.name }

获取更新子组件的msg值

子组件传来的值为：{ this.state.childrenMsg }

我要引入子组件了：

---

)

}

}

Children:

import React, {Component} from 'react'

export default class Children extends Component {

constructor(props) {

super(props)

this.state = {

name: '我是子组件',

msg: '子组件传值给父组件'

}

}

render() {

return (

{ this.state.name }

子组件的msg为：{ this.state.msg }

)

}

}

初始页面，点击按钮

点击按钮后

四、子组件Children给父组件Parent传方法

在第三点获取到整个组件的前提上，再获取方法，所以不详细讲了。