React中的跨组件通信的几种常见方法

import React from 'react';
import Child from './Child';
const Parent = () => {
  const message = 'Hello from Parent!';
  return <Child msg={message} />;
};
export default Parent;

import React from 'react';
const Child = (props) => {
  return <div>{props.msg}</div>;
};
export default Child;

import React, { useState } from 'react';
import Child from './Child';
const Parent = () => {
  const [message, setMessage] = useState('');
  const handleMessage = (msg) => {
    setMessage(msg);
  };
  return (
    <div>
      <Child onMessage={handleMessage} />
      <p>{message}</p>
    </div>
  );
};
export default Parent;

import React from 'react';
const Child = ({ onMessage }) => {
  return (
    <button onClick={() => onMessage('Hello from Child!')}>Send Message</button>
  );
};
export default Child;

import React, { createContext, useState, useContext } from 'react';
const MessageContext = createContext();
const Parent = () => {
  const [message, setMessage] = useState('Hello from Parent via Context!');
  return (
    <MessageContext.Provider value={message}>
      <Child />
    </MessageContext.Provider>
  );
};
const Child = () => {
  const message = useContext(MessageContext);
  return <p>{message}</p>;
};
export default Parent;

npm install mitt

import React, { useEffect, useState } from 'react';
import mitt from 'mitt';
const emitter = mitt();
const ComponentA = () => {
  const handleClick = () => {
    emitter.emit('message', 'Message from Component A');
  };
  return <button onClick={handleClick}>Send Message</button>;
};
const ComponentB = () => {
  const [message, setMessage] = useState('');
  useEffect(() => {
    const handleMessage = (msg) => setMessage(msg);
    emitter.on('message', handleMessage);
    return () => {
      emitter.off('message', handleMessage);
    };
  }, []);
  return <p>{message}</p>;
};
const App = () => (
  <div>
    <ComponentA />
    <ComponentB />
  </div>
);
export default App;