react组件通信方式

1. 父组件向子组件通信

1. // ParentComponent.js
2. import React from 'react';
3. import ChildComponent from './ChildComponent';
5. function ParentComponent() {
6.   const message = 'Hello from parent!';
8.   return (
9.     <div>
10.       <ChildComponent message={message} />
11.     </div>
12.   );
13. }
15. export default ParentComponent;
17. // ChildComponent.js
18. import React from 'react';
20. function ChildComponent(props) {
21.   return (
22.     <div>
23.       <p>{props.message}</p>
24.     </div>
25.   );
26. }
28. export default ChildComponent;

复制代码

2. 子组件向父组件通信

1. // ParentComponent.js
2. import React, { useState } from 'react';
3. import ChildComponent from './ChildComponent';
5. function ParentComponent() {
6.   const [message, setMessage] = useState('');
8.   const handleMessage = (msg) => {
9.     setMessage(msg);
10.   };
12.   return (
13.     <div>
14.       <ChildComponent onMessage={handleMessage} />
15.       <p>Message from child: {message}</p>
16.     </div>
17.   );
18. }
20. export default ParentComponent;
22. // ChildComponent.js
23. import React from 'react';
25. function ChildComponent(props) {
26.   const sendMessage = () => {
27.     props.onMessage('Hello from child!');
28.   };
30.   return (
31.     <button onClick={sendMessage}>Send Message</button>
32.   );
33. }
35. export default ChildComponent;

复制代码

3. 跨级组件通信

1. // App.js
2. import React, { createContext, useContext } from 'react';
3. import GrandParentComponent from './GrandParentComponent';
5. const MessageContext = createContext();
7. function App() {
8.   return (
9.     <MessageContext.Provider value={'Hello from App!'}>
10.       <GrandParentComponent />
11.     </MessageContext.Provider>
12.   );
13. }
15. export default App;
17. // GrandParentComponent.js
18. import React from 'react';
19. import ParentComponent from './ParentComponent';
21. function GrandParentComponent() {
22.   return (
23.     <div>
24.       <ParentComponent />
25.     </div>
26.   );
27. }
29. export default GrandParentComponent;
31. // ParentComponent.js
32. import React from 'react';
33. import ChildComponent from './ChildComponent';
34. import { MessageContext } from '../App';
36. function ParentComponent() {
37.   const message = useContext(MessageContext);
38.   return (
39.     <div>
40.       <ChildComponent message={message} />
41.     </div>
42.   );
43. }
45. export default ParentComponent;
47. // ChildComponent.js
48. import React from 'react';
50. function ChildComponent(props) {
51.   return (
52.     <div>
53.       <p>{props.message}</p>
54.     </div>
55.   );
56. }
58. export default ChildComponent;

复制代码

4. 使用 Redux 进行全局状态管理

1. // store.js
2. import { createStore } from 'redux';
4. const initialState = {
5.   message: '',
6. };
8. function rootReducer(state = initialState, action) {
9.   switch (action.type) {
10.     case 'SET_MESSAGE':
11.       return { ...state, message: action.payload };
12.     default:
13.       return state;
14.   }
15. }
17. const store = createStore(rootReducer);
19. export default store;
21. // App.js
22. import React from 'react';
23. import { Provider } from 'react-redux';
24. import store from './store';
25. import ComponentA from './ComponentA';
27. function App() {
28.   return (
29.     <Provider store={store}>
30.       <ComponentA />
31.     </Provider>
32.   );
33. }
35. export default App;
37. // ComponentA.js
38. import React, { useEffect } from 'react';
39. import { useSelector, useDispatch } from 'react-redux';
41. function ComponentA() {
42.   const message = useSelector(state => state.message);
43.   const dispatch = useDispatch();
45.   useEffect(() => {
46.     dispatch({ type: 'SET_MESSAGE', payload: 'Hello from ComponentA!' });
47.   }, []);
49.   return (
50.     <div>
51.       <p>{message}</p>
52.     </div>
53.   );
54. }
56. export default ComponentA;
58. // ComponentB.js
59. import React, { useEffect } from 'react';
60. import { useSelector, useDispatch } from 'react-redux';
62. function ComponentB() {
63.   const message = useSelector(state => state.message);
65.   return (
66.     <div>
67.       <p>{message}</p>
68.     </div>
69.   );
70. }
72. export default ComponentB;

复制代码

5. 使用 Refs 进行组件间通信

1. // ParentComponent.js
2. import React, { useRef } from 'react';
3. import ChildComponent from './ChildComponent';
5. function ParentComponent() {
6.   const childRef = useRef(null);
8.   const triggerMethod = () => {
9.     childRef.current.childMethod();
10.   };
12.   return (
13.     <div>
14.       <button onClick={triggerMethod}>Trigger Child Method</button>
15.       <ChildComponent ref={childRef} />
16.     </div>
17.   );
18. }
20. export default ParentComponent;
22. // ChildComponent.js
23. import React from 'react';
25. class ChildComponent extends React.Component {
26.   childMethod = () => {
27.     console.log('Called from ParentComponent');
28.   };
30.   render() {
31.     return <div>Child Component</div>;
32.   }
33. }
35. export default ChildComponent;

复制代码

6. 使用 Event Emitters 进行组件间通信

1. // EventEmitter.js
2. import Emitter from 'tiny-emitter/instance';
4. const eventEmitter = new Emitter();
6. export default eventEmitter;
8. // ComponentC.js
9. import React, { useEffect } from 'react';
10. import eventEmitter from './EventEmitter';
12. function ComponentC() {
13.   useEffect(() => {
14.     const handleEvent = (data) => {
15.       console.log('Received data:', data);
16.     };
18.     eventEmitter.on('my-event', handleEvent);
20.     return () => {
21.       eventEmitter.off('my-event', handleEvent);
22.     };
23.   }, []);
25.   return <div>Component C</div>;
26. }
28. export default ComponentC;
30. // ComponentD.js
31. import React, { useEffect } from 'react';
32. import eventEmitter from './EventEmitter';
34. function ComponentD() {
35.   useEffect(() => {
36.     eventEmitter.emit('my-event', 'Hello from ComponentD!');
37.   }, []);
39.   return <div>Component D</div>;
40. }
42. export default ComponentD;

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。