1. 父组件向子组件通信
// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';function ParentComponent() {const message = 'Hello from parent!';return (<div><ChildComponent message={message} /></div>);
}export default ParentComponent;// ChildComponent.js
import React from 'react';function ChildComponent(props) {return (<div><p>{props.message}</p></div>);
}export default ChildComponent;
2. 子组件向父组件通信
// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';function ParentComponent() {const [message, setMessage] = useState('');const handleMessage = (msg) => {setMessage(msg);};return (<div><ChildComponent onMessage={handleMessage} /><p>Message from child: {message}</p></div>);
}export default ParentComponent;// ChildComponent.js
import React from 'react';function ChildComponent(props) {const sendMessage = () => {props.onMessage('Hello from child!');};return (<button onClick={sendMessage}>Send Message</button>);
}export default ChildComponent;
3. 跨级组件通信
// App.js
import React, { createContext, useContext } from 'react';
import GrandParentComponent from './GrandParentComponent';const MessageContext = createContext();function App() {return (<MessageContext.Provider value={'Hello from App!'}><GrandParentComponent /></MessageContext.Provider>);
}export default App;// GrandParentComponent.js
import React from 'react';
import ParentComponent from './ParentComponent';function GrandParentComponent() {return (<div><ParentComponent /></div>);
}export default GrandParentComponent;// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';
import { MessageContext } from '../App';function ParentComponent() {const message = useContext(MessageContext);return (<div><ChildComponent message={message} /></div>);
}export default ParentComponent;// ChildComponent.js
import React from 'react';function ChildComponent(props) {return (<div><p>{props.message}</p></div>);
}export default ChildComponent;
4. 使用 Redux 进行全局状态管理
// store.js
import { createStore } from 'redux';const initialState = {message: '',
};function rootReducer(state = initialState, action) {switch (action.type) {case 'SET_MESSAGE':return { ...state, message: action.payload };default:return state;}
}const store = createStore(rootReducer);export default store;// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import ComponentA from './ComponentA';function App() {return (<Provider store={store}><ComponentA /></Provider>);
}export default App;// ComponentA.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';function ComponentA() {const message = useSelector(state => state.message);const dispatch = useDispatch();useEffect(() => {dispatch({ type: 'SET_MESSAGE', payload: 'Hello from ComponentA!' });}, []);return (<div><p>{message}</p></div>);
}export default ComponentA;// ComponentB.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';function ComponentB() {const message = useSelector(state => state.message);return (<div><p>{message}</p></div>);
}export default ComponentB;
5. 使用 Refs 进行组件间通信
// ParentComponent.js
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';function ParentComponent() {const childRef = useRef(null);const triggerMethod = () => {childRef.current.childMethod();};return (<div><button onClick={triggerMethod}>Trigger Child Method</button><ChildComponent ref={childRef} /></div>);
}export default ParentComponent;// ChildComponent.js
import React from 'react';class ChildComponent extends React.Component {childMethod = () => {console.log('Called from ParentComponent');};render() {return <div>Child Component</div>;}
}export default ChildComponent;
6. 使用 Event Emitters 进行组件间通信
// EventEmitter.js
import Emitter from 'tiny-emitter/instance';const eventEmitter = new Emitter();export default eventEmitter;// ComponentC.js
import React, { useEffect } from 'react';
import eventEmitter from './EventEmitter';function ComponentC() {useEffect(() => {const handleEvent = (data) => {console.log('Received data:', data);};eventEmitter.on('my-event', handleEvent);return () => {eventEmitter.off('my-event', handleEvent);};}, []);return <div>Component C</div>;
}export default ComponentC;// ComponentD.js
import React, { useEffect } from 'react';
import eventEmitter from './EventEmitter';function ComponentD() {useEffect(() => {eventEmitter.emit('my-event', 'Hello from ComponentD!');}, []);return <div>Component D</div>;
}export default ComponentD;
