React ES6 компонент модального API

Question

Я хотел бы создать компонент API для диалогового окна на основе https://github.com/reactjs/react-modal

Я хочу, чтобы компонент рендеринга реагировал с renderDOM, получал экземпляр компонента и вызывал API модального режима, это означает, например, open (), close () и т. Д.

Итак, точнее, я бы хотел работать с текущим состоянием компонента (как API работает), а не с реквизитом.

У меня есть простой базовый класс для всех модальностей:

export class BaseModal extends Modal {

    constructor() {
        super();

        this.state = BaseModal._getInitState();          
    }

    static get style() {
        return {
            content: {
                top: '50%',
                left: '50%',
                right: 'auto',
                bottom: 'auto',
                marginRight: '-50%',
                transform: 'translate(-50%, -50%)'
            }
        };
    }

    open() {
        this.setState({isOpen: true});
    }

    close() {
        this.setState({isOpen: false});
    }

    render() {
        return this.state.isOpen ? (
            <div className="modal modal__{this.name}">

                <Modal isOpen={this.state.isOpen}
                       onRequestClose={this.close}
                       style={BaseModal.style}
                       contentLabel={this.getHeaderContent()}
                       parentSelector={BaseModal._getParentSelector}>

                    <button onClick={this.close}>X</button>

                    <div className="modal__body">
                        {this.getBodyContent()}
                    </div>

                    <div className="modal__footer">
                        {this.getFooterContent()}
                    </div>
                </Modal>
            </div>
        ) : null;
    }

    getHeaderContent() {
        throw new Error("Not implement in child class.");
    }

    getBodyContent() {
        throw new Error("Not implement in child class.");
    }

    getFooterContent() {
        throw new Error("Not implement in child class.");
    }   

    static _getInitState() {
        let state = {};
        state.isOpen = false;
    }       
}

Теперь у меня есть дочерний компонент:

export class RecommendTripModal extends BaseModal {

    getHeaderContent() {
        return "Test modal dialog";      
    }

    getBodyContent() {
        return <p>Test modal body</p>;
    }

    getFooterContent() {
        return <p>Test modal footer</p>;
    }
}

Хорошо, это хорошо, но теперь я хочу назвать что-то вроде этого:

let recommendedTripModal = ReactDOM.render(React.createElement(RecommendTripModal, null), document.querySelector("#modals")); 

//open dialog
recommendedTripModal.open();

Но сейчас проблема с контекстом. Потому что this.state.isOpen имеет контекст RecomTripModal, а состояние равно нулю. Есть ли способ, как решить эту проблему с реагировать? И это твердый путь? Или я должен создать требуемый API другим способом?

Спасибо, что уделили время!

Answer 1

Хорошо, давайте копнем немного глубже, лучший способ - использовать контекст React и магическую силу HoC

Modal.js

import React from "react";
import PropTypes from "prop-types";
import { omit } from "lodash";

export class Modal extends React.Component {
  static contextTypes = {
    modalOpen: PropTypes.bool
  };

  static propTypes = {
    children: PropTypes.node
  };

  render() {
    if (!this.context.modalOpen) return null;

    return (
      <div>
        <h1>I am base modal title</h1>
        <div>{this.props.children}</div>
      </div>
    );
  }
}

export class ModalContext extends React.Component {
  static childContextTypes = {
    modalOpen: PropTypes.bool
  };

  static defaultProps = {
    onOpen: () => {},
    onClose: () => {}
  };

  static propTypes = {
    children: PropTypes.func.isRequired
  };

  constructor(...args) {
    super(...args);

    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  state = {
    isOpen: false
  };

  getChildContext() {
    return {
      modalOpen: this.state.isOpen
    };
  }

  handleClose() {
    if (this.state.isOpen) {
      this.setState({ isOpen: false });
    }
  }

  handleOpen() {
    if (!this.state.isOpen) {
      this.setState({ isOpen: true });
    }
  }

  render() {
    const { identity, children } = this.props;
    return children({
      [identity]: {
        open: this.handleOpen,
        close: this.handleClose,
        isOpen: this.state.isOpen
      }
    });
  }
}

export default function modal(initialModalProps = {}) {
  return function(Component) {
    const componentName =
      Component.displayName || Component.name || "Component";

    return class extends React.Component {
      static displayName = `Modal(${componentName})`;

      static propTypes = {
        identity: PropTypes.string
      };

      static defaultProps = {
        identity: "modal"
      };

      render() {
        const { identity } = this.props;
        return (
          <ModalContext
            identity={identity}
            {...initialModalProps}
            {...this.props[identity]}
          >
            {modalProps => (
              <Component
                {...omit(this.props, identity, "identity")}
                {...modalProps}
              />
            )}
          </ModalContext>
        );
      }
    };
  };
}

HelloWorldModal.js

import React from "react";
import withModal, { Modal } from "./modal";

class HelloWorldModal extends React.Component {
  render() {
    const { modal } = this.props;
    return (
      <div>
        <button type="button" onClick={modal.open}>
          Open Modal
        </button>
        <button type="button" onClick={modal.close}>
          Close Modal
        </button>
        <Modal>Yeah! I am sample modal!</Modal>
      </div>
    );
  }
}

export default withModal()(HelloWorldModal);

Если вам лень, я подготовил коды и коробку с рабочим кодом:)

https://codesandbox.io/s/2oxx2j4270?module=%2Fsrc%2FHelloWorldModal.js