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 【React|React 父组件给子组件传值、方法、整个组件】/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 }
我要引入子组件了：
文章图片
已成功引入子组件 二、父组件Parent传值(msg)给子组件Children
React父组件传值给子组件的步骤：- 父传子值：在调用子组件的时候，作为属性的值传给子组件
- 子接受父： 通过
this.props来获取
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:
import React, {Component} from 'react'export default class Children extends Component {
constructor(props) {
super(props)
this.state = {
name: '我是子组件',
msg: '子组件传值给父组件'
}
}render() {
return ({ this.state.name }
{ this.props['parent-msg'] }
)
}
}
文章图片
绿色框框里的就是父传过来的parent-msg啦 二、父组件Parent传方法(run)给子组件Children
React父组件传方法给子组件的步骤：- 父传子值：在调用子组件的时候，作为属性的值传给子组件
- 子接受父： 通过
this.props来获取
Parent
import React, {Component} from 'react'
import Children from './Children'export default class Parent extends Component {
constructor(props) {
super(props)
this.state = {
name: '我是父组件',
msg: '父组件传值给子组件'
}
}run = () => {
alert('我是父组件的run方法')
}
render() {
return ({ this.state.name }
我要引入子组件了：
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 }
{ this.props['parent-msg'] }
)
}
}
文章图片
点击按钮
文章图片
子组件能调用父组件的方法 三、父组件Parent传整个组件（parent）给子组件Children
React父组件传整个组件给子组件步骤：- 父传子值：在调用子组件的时候，作为属性的值传给子组件
- 子接受父： 通过
this.props来获取
import React, {Component} from 'react'
import Children from './Children'export default class Parent extends Component {
constructor(props) {
super(props)
this.state = {
name: '我是父组件',
msg: '父组件传值给子组件'
}
}run = () => {
alert('我是父组件的run方法')
}getName = () => {
alert(this.state.name)
}render() {
return ({ this.state.name }
我要引入子组件了：
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 }
{ this.props['parent-msg'] }
获取父组件的name：{ this.props['parent-parent'].state.name }
获取父组件的msg：{ this.props['parent-parent'].state.msg }
)
}
}
文章图片
成功获取到父组件的各种值，点击按钮
文章图片
能调用到没直接传过来的getName方法
推荐阅读
- 那件我们忽略的小事叫感恩
- 有父母作榜样的家才是真正的学区房
- 老了的父母
- 父母越不讲道理，孩子反而越优秀！说的是你吗（）
- 孩子不是实现父母欲望的工具——林哈夫
- 《老婆》
- 我的小叔
- react|react 安装
- 陷入父母的心理战，孩子被彻底打败
- 焦点父母课堂洛阳中期班|焦点父母课堂洛阳中期班 第125分享 汪丽