react通訊方式有：1、用props進行父子元件通訊；2、用回呼函數進行子父元件通訊；3、用變數提升進行兄弟元件通訊；4、用Context進行跨元件通訊； 5.用node的events模組進行單例通訊；6、用redux共享資料通訊。
本教學操作環境：Windows7系統、react17.0.1版、Dell G3電腦。
React的六種通訊方式
1.props父子通訊
6.redux
2.回呼函數，子父通訊
# 2.回呼函數，子父通訊
# .變數提升，兄弟元件通訊
4.Context,跨元件通訊
5.node的events模組的單例通訊
##'
#1.props父子通訊function Children(props) {
return (
<div>
<p>Children</p>
<p>{props.text}</p>
</div>
)
}
function Parent() {
return (
<div>
<p>Parent</p>
<Children text="这是爸爸传给你的东西"></Children>
</div>
)
}
export default Parent登入後複製
function Children(props) {
return (
<div>
<p>Children</p>
<p>{props.text}</p>
<button onClick={() => { props.handleChange('改变了') }}>
点击我改变爸爸传给我的东西
</button>
</div>
)
}
function Parent() {
let [text, setText] = useState('这是爸爸传给你的东西')
function handleChange(val) {
setText(val)
}
return (
<div>
<p>Parent</p>
<Children handleChange={handleChange} text={text}></Children>
</div>
)
}
export default Parentfunction Children(props) {
return (
<div>
<p>Children</p>
<button onClick={() => { props.setText('我是Children发的信息') }}>给Children1发信息</button>
</div>
)
}
function Children1(props) {
return (
<div>
<p>Children1</p>
<p>{props.text}</p>
</div>
)
}
function App() {
let [text, setText] = useState('')
return (
<>
<div>APP</div>
<Children setText={setText}></Children>
<Children1 text={text}></Children1>
</>
)
}
export default Appclass Children extends React.Component {
static contextTypes = {
text: PropsType.string
}
render() {
return (
<div>
<p>Children</p>
<p>{this.context.text}</p>
</div>
)
}
}
class Parent extends React.Component {
static childContextTypes = {
text: PropsType.string
}
getChildContext() {
return {
text: '我是爸爸的信息'
}
}
render() {
return (
<div>
<p>Parent</p>
<Children></Children>
</div>
)
}
}
export default Parentconst { Consumer, Provider } = React.createContext()
class Children extends React.Component {
render() {
return (
<Consumer>
{
(value) => (
<div>
<p>Children1</p>
<p>{value.text}</p>
</div>
)
}
</Consumer>
)
}
}
class Parent extends React.Component {
render() {
return (
<Provider value={{ text: '我是context' }}>
<div>
<p>Parent</p>
<Children1></Children1>
</div>
</Provider>
)
}
}
export default Parentfunction Children(props) {
return (
<div>
<p>Children</p>
<p>{props.text}</p>
<button onClick={() => { props.event.emit('foo') }}>点击我改变爸爸传给我的东西</button>
</div>
)
}
function Parent() {
let [text, setText] = useState('这是爸爸传给你的东西')
let event = new Events()
event.on('foo', () => { setText('改变了') })
return (
<div>
<p>Parent</p>
<Children event={event} text={text}></Children>
</div>
)
}
export default Parentimport { createStore } from 'redux'
let defaultState = {
text: '我是store'
}
let reducer = (state = defaultState, action) => {
switch (action) {
default: return state
}
}
export default createStore(reducer)import React from 'react'
import { connect } from 'react-redux'
class Child extends React.Component {
render() {
return (
<div>Child<p>{this.props.text}</p></div>
)
}
}
let mapStataToProps = (state) => {
return {
text: state.text
}
}
export default connect(mapStataToProps, null)(Child)class Parent extends React.Component {
render() {
return (
<Provider store={store}>
<div>
<p>Parent</p>
<Child></Child>
</div>
</Provider>
)
}
}
export default Parent以上是react通訊有哪些方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
