react组件通信方式

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;