组件通信
一、父组件向子组件传值
子组件(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