一、準備工作

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傳方法

在第三點獲取到整個組件的前提上，再獲取方法，所以不詳細講了。

總結

以上是生活随笔為你收集整理的react 子传参父_React 子组件给父组件传值、整个组件、方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。