Блог

Главная - Вопросы по программированию - как повторно использовать модальное окно в режиме ожидания в React

как повторно использовать модальное окно в режиме ожидания в React

#reactjs #redux #high-order-component

Вопрос:

У меня есть модальное окно, которое открывается, если пользователь дважды нажал кнопку. Но я хочу использовать его в другом компоненте, поэтому я хочу сделать его многоразовым. Модальное использование состояний из Redux («Случайная активность», то есть данные, и «Повторная активность», которая является логической). Итак, меня смущает рефакторинг кода.

Это начальный код

 class RepeatedModal extends Component {
  closeRepeatedToast = () => {
    this.props.closeRepeatedToast(false);
  };

  render() {
    const { repeatedActivity, randomActivity, classes } = this.props;

    return (
      <div>
        <Modal
          aria-labelledby="transition-modal-title"
          aria-describedby="transition-modal-description"
          className={classes.modal}
          open={repeatedActivity}
          onClose={this.closeRepeatedToast}
          closeAfterTransition
          BackdropComponent={Backdrop}
          BackdropProps={{
            timeout: 500,
          }}
        >
          <Fade in={repeatedActivity}>
            <div className={classes.modalPaper}>
              <h2 id="transition-modal-title">
                "{randomActivity.activity}" was already saved
              </h2>
            </div>
          </Fade>
        </Modal>
      </div>
    );
  }
}

export default ModalComponent(
  withStyles(styles, { withTheme: true })(RepeatedModal)
);

Это код после рефакторинга.

 const RepeatedModal = ({data}) => ((
  <div>
          <Modal
             aria-labelledby="transition-modal-title"
            aria-describedby="transition-modal-description"
             className={classes.modal}
             open={repeatedActivity}
             onClose={this.closeRepeatedToast}
             closeAfterTransition
             BackdropComponent={Backdrop}
             BackdropProps={{
               timeout: 500,
             }}
           >
             <Fade in={repeatedActivity}>
               <div className={classes.modalPaper}>
                 <h2 id="transition-modal-title">
                   "{randomActivity.activity}" was already saved
                 </h2>
               </div>
             </Fade>
           </Modal>
         </div>
))
export default ModalComponent(
  withStyles(styles, { withTheme: true })(RepeatedModal)
);

и специальные

 const ModalComponent = (WrappedComponent) => {
  return class extends Component {
    closeRepeatedToast = () => {
      this.props.closeRepeatedToast(this.data);
    };

    render() {
      

      return <WrappedComponent {...this.props} data={this.state.data} />;
    }
  };
};

export default ModalComponent;

Комментарии:

1. Итак, вы создали компонент более высокого порядка. Есть ли какой-то вопрос или проблема? Ваш HOC, похоже, отсутствует state.data и не использует closeRepeatedToast обратный вызов.

2. непонятно, какую цель вы преследуете. расскажите подробнее о внешнем интерфейсе(реквизитах), который вам необходимо реализовать для этого, таких как обратные вызовы или значения по умолчанию и т.д. если вам нужно повторно использовать весь модальный — так почему бы просто не использовать его как компонент(не нужно использовать специальный), если вам нужно повторно использовать функциональность отдельно — так напишите его внутри пользовательского крючка react и примените к любому интерфейсу.

3. Дрю Риз, ты прав. Я не могу понять, как использовать обратный вызов closeRepeatedToast и данные .

Метки: