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;
相关推荐
2501_915918411 天前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂1 天前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技1 天前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip1 天前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go1 天前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x1 天前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java1 天前
CSS3核心技术
前端·css·css3
空山新雨(大队长)1 天前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术1 天前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体