반응 할 수있는 전역으로 액세스 할 수있는 모달 구성 요소

Question

내 응용 프로그램의 어느 곳에서나 액세스 할 수있는 모달을 구현하는 데 깔끔한 방법을 찾기 위해 고심하고 있습니다.

모달이있는 모든 구성 요소에 로컬 상태가 isOpen 인 것을 피하기를 원합니다. 단 하나의 모달 만 한 번에 볼 수 있어야하기 때문입니다. 또한 모달이 앞으로 활성화 될 수 있어야하는 구성 요소가 확실치 않아 모든 구성 요소에 소품을 보내지 않아도되도록하고 싶습니다.

나는 기본 모달 구성 요소는 다음 돌아 오는에 모달 하위 상태 isOpen 및 component를 저장, 내 최상위에 App 구성 요소를 구현 가지고, 돌아 오는 그것을 해결하려고했지만 해당 구성 요소가 될해야하기 때문에이 문제를 많이 도입 사용자가 모달과 상호 작용할 때마다 업데이트됩니다.

또한 React 16의 포털을 사용하여 시도했지만 내 요구에 맞지 않는 것 같습니다. 도움말 감사. 여기에 어떤 아이디어 또는 모범 사례?

Answer 1

react-semantic-ui에서 모달 구현을 살펴보면 모달은 본문 루트의 포털을 통해 인스턴스화 된 자체 관리 구성 요소입니다. 앱의 어디서나 액세스하고 싶다면 간단히 그것을 참조하여 작성한 3 개의 컴퍼넌트에 전달하십시오.

Answer 2

이미 사용중인 것은 Redux로 구현 한 중앙 집중식 상태입니다.

아마도 React Baobab을 사용하면 구현이 명확 해 지므로 다시 렌더링해야하는 구성 요소 만 다시 렌더링됩니다.

참고 : 데모를 위해 모달을 사용하는 많은 구성 요소와 작동하지 않는 하나의 "isOpened"속성으로 작업하고 있습니다. 이 경우 다른 상태를 추가해야합니다. 예를 들어, 열려는 모달의 ID와이 ID가 설정되었는지 (SomeComponent에서) 확인해야합니다.

모달 :

import React from "react"; 

export default class Modal extends React.Component { 
    render() { 
     return (
      <div className="myModal"></div> 
     ); 
    } 
} 

SomeComponent :

import React from "react"; 
import { branch as BaobabBranch } from "baobab-react/higher-order"; 
import PropTypes from "prop-types"; 
import { openModal } from "./actions/Modal"; 

@BaobabBranch({ 
    modal: ["modal"] 
}) 
export default class SomeComponent extends React.Component { 
    static propTypes = { 
     dispatch: PropTypes.func.isRequired, 
     modal: PropTypes.object.isRequired 
    } 

    onOpenModal() { 
     this.props.dispatch(openModal); 
    } 

    render() { 
     return (
      <div className="someComponent"> 
      { this.props.modal.isOpened ? 
       <Modal /> 
        : 
       <div class="content" onClick={::this.onOpenModal}></div> 
      } 
      </div> 
     ); 
    } 
} 

행동/모달 :

export const openModal = state => { 
    state.select("modal").set(Object.assign({}, state.get("modal"), { 
     isOpened: true 
    })); 
}; 

상태 :

import Baobab from "baobab"; 

const state = new Baobab({ 
    modal: { 
     isOpened: false, 
     content: "someContent" 
    } 
}); 

간략한 설명 :

상태는 위의 값으로 초기화되는 전역 상태를 유지합니다. SomeComponent의 content div를 클릭하면 openModal 액션이 실행됩니다. 모든 동작의 첫 번째 인수는 항상 상태 자체입니다. 상태 값이 변경되면 (@BaobabBranch를 사용하여) 모든 청취 구성 요소가 새 소품에 대해 알리고 다시 대여합니다.

다른 구성 요소를 추가하면 모달 값도들을 수 있습니다. 이를 통해 모달 처리를 중앙 집중화하고 레이어 사이에 값을 버블 링하지 않도록하는 데 필요한 모든 것이 있습니다.