在 React Native 中管理多個模態的最佳實踐

Question

我有一個屏幕，我需要在其中顯示多個模態。 例如，如果某個請求失敗，那么我想顯示一個錯誤模式，如果某個請求成功，那么我想顯示一個成功模式。

我目前按照以下方式進行操作，我認為這是不好的做法：

...

export default function SomeSampleScreen(props) {
  const [errorModalVisible, setErrorModalVisible] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');
  const [successModalVisible, setSuccessModalVisible] = useState(false);
  const [successMessage, setSuccessMessage] = useState('');

  function showError(message) {
    setErrorMessage(message);
    setErrorModalVisible(true);
  }

  function showSuccess(message) {
    setSuccessMessage(message);
    setSuccessModalVisible(true);
  }

  return (
    <>
      <ErrorModal
        visible={errorModalVisible}
        onClose={() => {
          setErrorModalVisible(false);
        }}>
        {errorMessage}
      </ErrorModal>
      <SuccessModal
        visible={successModalVisible}
        onClose={() => {
          setSuccessModalVisible(false);
        }}>
        {successMessage}
      </SuccessModal>
      <View>
        ...
      </View>
    </>
  );
}

Answer 1

你可以把它壓縮成一個對象：

export default function SomeSampleScreen(props) {
  const [modalState, setModalState] = useState({state: ''});

  function showError(message) {
    setModalState({state: "error", message});
  }

  function showSuccess(message) {
    setModalState({state: "success", message});
  }

  return (
    <>
      <ErrorModal
        visible={modalState.state === "error"}
        onClose={() => {
          setModalState({state: ''});
        }}>
        {modalState.message}
      </ErrorModal>
      <SuccessModal
        visible={modalState.state === "success"}
        onClose={() => {
          setModalState(false);
        }}>
        {modalState.message}
      </SuccessModal>
      <View>
        ...
      </View>
    </>
  );
}

UDPATE 在澄清實際問題之后，這是一個很好的方法。 創建上下文：

const ModalContext = React.createContext({status: "", message: ""});

在樹中某處添加上下文和模態：

constructor(props) {
    super(props);

    this.setModal = (modalState) => {
      this.setState(state => ({...state, ...modalState}));
    };
    this.state = {
      status: "",
      message: "",
      setModal: this.setModal,
    };
  }
return <ModalContext.Provider value={this.state.modalState}>
        <RestOfApp />
        <Modals/>
      </ModalContext.Provider>

模態類似於您發布的內容：

export default function SomeSampleScreen(props) {
  const modalState = useContext(ModalContext);

  function showError(message) {
    modalState.setModal({state: "error", message});
  }

  function showSuccess(message) {
    modalState.setModal({state: "success", message});
  }

  return (
    <>
      <ErrorModal
        visible={modalState.state === "error"}
        onClose={() => {
          modalState.setModal({state: ''});
        }}>
        {modalState.message}
      </ErrorModal>
      <SuccessModal
        visible={modalState.state === "success"}
        onClose={() => {
          modalState.setModal(false);
        }}>
        {modalState.message}
      </SuccessModal>
      <View>
        ...
      </View>
    </>
  );
}

Answer 2

您可以使用conditional render different data on the same modal返回different data on the same modal 。 像這樣：

export default function SomeSampleScreen(props) {
  const [ModalVisible, setModalVisible] = useState(false);
  const [errorMessage, setErrorMessage] = useState(false);
  const [successMessage, setSuccessMessage] = useState(false);

  function showError(message) {
    setErrorMessage(message);
    setModalVisible(true);
  }

  function showSuccess(message) {
    setSuccessMessage(message);
    setModalVisible(true);
  }

  return (
    <>
      <Modal
        visible={ModalVisible}
        onClose={() => {
          setSuccessModalVisible(false);
          setSuccessMessage(false);
          setErrorMessage(false);
        }}>

        {errorMessage && (
          {errorMessage}
        )}

        { successMessage && (
          {successMessage}
        )}

      </Modal>
      <View>
        ...
      </View>
    </>
  );
}

Answer 3

怎么樣？

export default function SomeSampleScreen(props) {
  const modalInitialState = {
    type: null,
    message: null
  }
  const [modal, setModal] = useState(modalInitialState)

  function handleModal(type, message){
    setModalState({ type, message });
  }

  return (
    <>
      <ErrorModal
        visible={modal.type === 'ERROR' || false}
        onClose={() => {
          setModal(modalInitialState)
        }}>
        {modal.message}
      </ErrorModal>
      <SuccessModal
        visible={modal.type === 'SUCCESS' || false}
        onClose={() => {
          setModal(modalInitialState)
        }}>
        {modal.mensage}
      </SuccessModal>
      <View>
        ...
      </View>
    </>
  );
}