Skip to main content

组件通信

一、父组件向子组件传值

子组件(CommunicationChildren.js)

import React from 'react';

class CommunicationChildren extends React.Component {
constructor(props) {
super(props)
}

render() {
return <div>姓名:{this.props.name}</div>
}
}

export default CommunicationChildren

父组件(Parent.js)

Live Editor
Result
Loading...

二、子组件调用父组件方法

子组件(CommunicationChildren2.js)

import React from 'react';
import Button from '@mui/material/Button';

class CommunicationChildren2 extends React.Component {
constructor(props) {
super(props)
}

callParentFunc() {
this.props.parentFunc('jack')
}

render() {
return (
<div>
<Button variant="outlined" onClick={() => this.callParentFunc()}>调用父组件方法修改姓名</Button>
</div>
)
}
}

export default CommunicationChildren2

父组件(Parent.js)

Live Editor
Result
Loading...

三、通过 refs 获取子组件的属性和方法

子组件(CommunicationChildren3.js)

import React from 'react';

class CommunicationChildren3 extends React.Component {
constructor(props) {
super(props)
this.state = {
name: 'tom'
}
}

sayHello() {
this.setState({
name: 'jack'
})
}

render() {
return (<p>姓名:{this.state.name}</p>)
}
}

export default CommunicationChildren3

父组件(Parent.js)

Live Editor
Result
Loading...

四、useRef & useImperativeHandle 组合

子组件(RefChildren.js)

import React, { useState, useImperativeHandle, forwardRef } from "react"

const RefChildren = forwardRef((props, ref) => {
const [name, setName] = useState('tom')

useImperativeHandle(ref, () => {
return {
changeName(name) {
setName(name)
}
}
})

return <p ref={ref}>姓名:{name}</p>
})

export default RefChildren

父组件(Parent.js)

Live Editor
Result
Loading...

五、兄弟组件通信

兄弟组件通信可以使用父子组件通信原理进行组合实现

六、其他

  • 使用redux
  • 使用web存储
  • 使用全局变量
  • 使用useContext