Javascript Reaction跨多个组件共享一个功能

const ChatContext = React.createContext();


function ChatHeader() {
  const {chatID} = React.useContext(ChatContext);
  return <h1>Chat Header for: {chatID}</h1>
}

function ChatBody() {
  const {chatID, deleteMessage} = React.useContext(ChatContext);
  return <div>
    ChatBody for {chatID}
    <button onClick={() => deleteMessage('delete')}>Delete Message</button>
  </div>
}

function ChatScreen(props) {
  function deleteMessage(msg) {
    console.log(`Delete message ${msg} for ${props.chatID}`);
  }
  return <div>
    <ChatContext.Provider value={{
      ...props,
      deleteMessage
    }}>
      <ChatHeader/>
      <ChatBody/>
    </ChatContext.Provider>
  </div>
}

const App = () => {
    return (
        <React.Fragment>
          <ChatScreen chatID="chat1"/>
          <ChatScreen chatID="chat2"/>
        </React.Fragment>
    );
}

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>