Реагировать на вызов функции из компонента-оболочки - PullRequest
Новая
       26

Реагировать на вызов функции из компонента-оболочки

0 голосов
/ 27 сентября 2019

Я не настолько опытен с React, но меня назначили в существующий сложный проект React.У меня есть всплывающее окно, которое показывалось только один раз, но оно может загрузить определенный компонент.Я хочу закрыть всплывающее окно с помощью кнопки из других компонентов, на самом деле функция закрытия всплывающего окна существует в компоненте-обертке, но как вызвать его из неклассового компонента?

У меня есть всплывающее окно с именем ModalView.jsx, это обертка: 

class ModalView extends Component {
  static propTypes = {
    //...
    isShow: PropTypes.bool,
  };
  static defaultProps = {
    isShow: false,
  }
  render() {
    const {
      isShow,
      showedComponent,
    } = this.props;

    onCancel = () => {
      const { showPagePopup } = this.props;
      showPagePopup({ isShow: false });
    }
    return (
      <div
        className={cx('page-popup modal fade', {
          'd-block show': isShow,
        })}
        tabIndex="-1"
        role="dialog"
        aria-hidden="true"
      >
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <button type="button" className="close close-modal" data-dismiss="modal" aria-label="Close" onClick={() => this.onCancel()}>
              <IconCloseModal width="14" height="14" className="icon icon-close" />
            </button>
            <div className="modal-body">
              {showedComponent}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

, и у меня есть компонент, который будет показан в {showedComponent} с именем MyCard.jsx: 

const MyCard = ({
myRules = isShow
}) => {
    const openPage = () => {
      // -------how to call onCancel() function from ModalView.jsx in this line?--------
      var pageUrl = `xxx`;
      setTimeout(function(){
        window.open(pageUrl, '_blank');
      }, 3000);
    }
return (
  ...
  <PrimaryButton onClick={() => openPage()} className="hide-for-print-version ml-3">
     Open Page
  </PrimaryButton>
  ...
);
};

Так как вызвать onCancel() функцию из ModalView.jsx до MyCard постоянная составляющая?

1 Ответ

0 голосов
/ 27 сентября 2019

Вы можете использовать шаблон рендеринга реквизита здесь: 

// modal
  ...
  render() {
    const { children: renderProp } = this.props;

    return (
      <div className="modal-body">
        {renderProp(onClose)}
      </div>
    );
  }
  ...

// using modal
// instead of
return (
  <Modal>
    <ChildComponent />
  </Modal>
);

// use

return (
  <Modal>
    {close => <ChildComponent close={ close } />
  </Modal>
);

Теперь ChildComponent имеет close реквизитов, содержащих обработчик onClose.

PS: Кстати, лучшеизбегая создания обратных вызовов для каждого рендера, вы можете объявить ваш обработчик onClose на уровне класса вместо render() function: 

class ModalView extends Component {
  onClose = () => { ... }

  render() {
    // use this.onClose instead
  }
}
...