1

我正在创建一个可重用的模式，一切正常，但是当我实际调用组件时，输入转换不起作用。退出完美。我得到错误：

warning.js:45 警告：失败的 propType：transitionLeaveTimeout 未提供给 ReactCSSTransitionGroup：这可能会导致动画不可靠，并且在 React 的未来版本中将不再支持。检查 Modal 的渲染方法

我已经按照指示提供了进入和离开超时，但仍然没有运气。 

import React from 'react';
import { render } from 'react-dom';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import '../../modal.css';

const Modal = React.createClass({
    render(){
        if(this.props.isOpen){
            return (
              <ReactCSSTransitionGroup transitionName={this.props.transitionName} transitionEnterTimeout={400} transitionLeaveTimeout={400}>
               <div className="ui-modal" key={this.props.transitionName} {...this.props}> 
                  {this.props.children}
                </div>
              </ReactCSSTransitionGroup>
            );
        } else {
            return <ReactCSSTransitionGroup transitionName={this.props.transitionName} />;
        }
    }
});

const UiModal = React.createClass({
    getInitialState(){
      return { isModalOpen: false };
    },

    openModal() {
        this.setState({ isModalOpen: true });
    },

    closeModal() {
        this.setState({ isModalOpen: false });
    },

    setModalSize() {
        this.setState({ isModalLarge: false });
    },

    render() {
        const { openBtnText, header, subHeader, body, footer, optionalFooterText, closeBtnText, size } = this.props;
         const modalSize = size === 'large' ? 'ui-modal-large' : 'ui-modal-small';

        return (
          <div className="ui-modal-trigger-container">
            <h1>Modal small enter from bottom</h1>
            <div className="button" onClick={this.openModal}>{ this.props.openBtnText }</div>
            <Modal isOpen={this.state.isModalOpen} transitionName="modal-anim" id={modalSize}>
              <h1 className="ui-modal-header">{header}</h1>
              <div className="ui-modal-subheader">{subHeader}</div>
              <div className="ui-modal-body">
                {body}
              </div>
              <div className="ui-modal-footer">
                <div className="ui-modal-footer-button-group">
                  <div className="ui-modal-footer-button button" onClick={this.closeModal}>{closeBtnText}</div>
                  <div className="ui-modal-optional-footer-text" onClick={this.closeModal}>{optionalFooterText}</div>
                </div>
              </div>
            </Modal>
          </div>
        );
    }
});

export default UiModal;

我在控制台中得到的唯一信息是：

warning.js:45 警告：失败的 propType：transitionLeaveTimeout 未提供给 ReactCSSTransitionGroup：这可能会导致动画不可靠，并且在 React 的未来版本中将不再支持。检查 Modal 的渲染方法

我不确定如何解决，因为我已经提供了进入和离开超时并且它不能解决问题。

模态的 CSS 如下：

.ui-modal-trigger-container {
    width: 500px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 0;
    margin-top: 300px;
}

.ui-modal {
    width: 450px;
    margin: 0 auto;
    top: 70%;
    left: 35%;
    padding: 20px;
    background-color: green;
    position: absolute;
    z-index: 1;
    border: 1px solid grey;
    box-shadow: 0 0 5px 2px #fff;
    background: white;
}

#ui-modal-small {
    width: 450px;
    margin: 0 auto;
    top: 70%;
    left: 35%;
    padding: 20px;
    background-color: green;
    position: absolute;
    z-index: 1;
    border: 1px solid grey;
    box-shadow: 0 0 5px 2px #fff;
    background: white;
}

#ui-modal-large {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 8%;
    left:0%;
    border: 1px solid #ccc;
    background: white;
}

.ui-modal-header {
    font-family: 'Flexo';
    font-size: 28px;
    border-bottom: 2px solid black;
    width: 90%;
    margin: 0 auto;
}

.ui-modal-subheader {
    font-family: 'Flexo';
    font-size: 13px;
    width: 90%;
    margin: 0 auto;
}

.ui-modal-body {
    margin: 0 auto;
    width: 90%;
    padding: 10px;
}

.ui-modal-footer {
    border-top: 2px solid black;
    margin: 0 auto;
    width: 90%;
}

.ui-modal-footer-button-group {
    padding-top: 10px;
}

.ui-modal-footer-button {
    float: right;
}

.ui-modal-optional-footer-text {
    float: left;
    color: #4099D4;
    font-style: italic;
}

.modal-anim-enter {
    opacity: 0.00;
    transform: translateY(100%);
    transition: all .5s;
}

.modal-anim-enter.modal-anim-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: all .5s;
}

.modal-anim-leave {
    opacity: 1;
    transform: translateY(100%);
    transition: all .5s;
}

.modal-anim-leave.modal-anim-leave-active {
    opacity: 0.00;
    transform: translateY(100%);
}
4

0 回答 0