import React, { createContext, useContext } from 'react';

// 創(chuàng)建 Context
const MyContext = createContext({
  togglePopup: () => {}, // 這是一個(gè)示例方法
});

export const MyProvider = ({ children }) => {
  const togglePopup = () => {
    // 這里實(shí)現(xiàn)彈窗的顯示隱藏邏輯
    console.log("Toggle Popup called");
  };

  return (
    <MyContext.Provider value={{ togglePopup }}>
      {children}
    </MyContext.Provider>
  );
};

import React from 'react';
import { MyProvider } from './MyProvider'; // 引入剛才創(chuàng)建的 Provider

function App() {
  return (
    <MyProvider>
      {/* 應(yīng)用的其余部分 */}
    </MyProvider>
  );
}

export default App;

import React, { useContext } from 'react';
import { MyContext } from './MyContext';

const Popup = () => {
  const { togglePopup } = useContext(MyContext);

  return (
    <div>
      {/* 彈窗的內(nèi)容 */}
      <button onClick={togglePopup}>關(guān)閉彈窗</button>
    </div>
  );
};

export default Popup;

import mitt from 'mitt';

const emitter = mitt();

export default emitter;

import React from 'react';
import emitter from './emitter';

function App() {
  const openPopup = () => {
    emitter.emit('togglePopup', true);
  };

  return (
    <div>
      <button onClick={openPopup}>打開彈窗</button>
      {/* 其他組件 */}
    </div>
  );
}

export default App;

import React, { useEffect, useState } from 'react';
import emitter from './emitter';

const Popup = () => {
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    const toggleListener = (state) => {
      setIsOpen(state);
    };

    emitter.on('togglePopup', toggleListener);

    return () => {
      emitter.off('togglePopup', toggleListener);
    };
  }, []);

  if (!isOpen) return null;

  return (
    <div>
      {/* 彈窗內(nèi)容 */}
      <button onClick={() => setIsOpen(false)}>關(guān)閉彈窗</button>
    </div>
  );
};

export default Popup;

import React, { useImperativeHandle, forwardRef } from 'react';

const Popup = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    openPopup: () => {
      console.log("彈窗打開");
      // 彈窗打開的邏輯
    },
    closePopup: () => {
      console.log("彈窗關(guān)閉");
      // 彈窗關(guān)閉的邏輯
    }
  }));

  return (
    <div>這里是彈窗的內(nèi)容</div>
  );
});

export default Popup;

import React, { useRef } from 'react';
import Popup from './Popup';

function App() {
  const popupRef = useRef();

  const openPopup = () => {
    popupRef.current.openPopup();
  };

  const closePopup = () => {
    popupRef.current.closePopup();
  };

  return (
    <div>
      <button onClick={openPopup}>打開彈窗</button>
      <button onClick={closePopup}>關(guān)閉彈窗</button>
      <Popup ref={popupRef} />
    </div>
  );
}

export default App;

// actions.js
export const togglePopup = () => ({
  type: 'TOGGLE_POPUP'
});

// reducer.js
const initialState = {
  isPopupOpen: false
};

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'TOGGLE_POPUP':
      return { ...state, isPopupOpen: !state.isPopupOpen };
    default:
      return state;
  }
};

// store.js
import { createStore } from 'redux';
import { reducer } from './reducer';

export const store = createStore(reducer);

import React from 'react';
import { Provider } from 'react-redux';
import { store } from './store';
import { togglePopup } from './actions';
import Popup from './Popup';

function App() {
  return (
    <Provider store={store}>
      <button onClick={() => store.dispatch(togglePopup())}>
        切換彈窗狀態(tài)
      </button>
      <Popup />
    </Provider>
  );
}

export default App;

import React from 'react';
import { connect } from 'react-redux';

const Popup = ({ isPopupOpen }) => {
  if (!isPopupOpen) return null;

  return (
    <div>彈窗內(nèi)容</div>
  );
};

const mapStateToProps = state => ({
  isPopupOpen: state.isPopupOpen
});

export default connect(mapStateToProps)(Popup);

import React, { useState } from 'react';
import Popup from './Popup';

function App() {
  const [isPopupOpen, setIsPopupOpen] = useState(false);

  const togglePopup = () => {
    setIsPopupOpen(!isPopupOpen);
  };

  return (
    <div>
      <button onClick={togglePopup}>切換彈窗狀態(tài)</button>
      <Popup isOpen={isPopupOpen} onClose={togglePopup} />
    </div>
  );
}

export default App;

import React from 'react';

const Popup = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  return (
    <div>
      彈窗內(nèi)容
      <button onClick={onClose}>關(guān)閉</button>
    </div>
  );
};

export default Popup;