Question

我正在尝试使用ReactCSSTransitionGroup设置在进入和离开时动画的模式的宽度。我正在Modal中创建一个模态并渲染其子项。我需要有条件地设置className＆＃39; ui-modal＆＃39;要么是'ui-modal-small＆＃39;或者＆uu-modal-large＆＃39;取决于this.props.size是什么。我遇到了一个问题，我只能在UiModal中成功获取this.props.size值，我似乎无法获得Modal中的值，我将在其中进行条件渲染能够根据大小设置CSS（类似于：this.props.size === 'large' ? 'ui-modal-large' : 'ui-modal-small'）。以下是两个组成部分：

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.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;
        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">
              <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;

下面：使用以下道具调用uiModal组件：

 <UiModal 
    openBtnText={'open me'}
    header={'UiModal Header'}
    body={'This is a modal body'}
    subHeader={'This is a modal subheader'}
    closeBtnText={'close me'}
    size={'small'}
    optionalFooterText={'this is optional text+'}
   />

Answer 1

您已经关闭了，您只需要将条件语句添加到模态组件渲染方法中，然后在需要时使用派生值。 e.g。

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 " + modalSize}>
        <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" size={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;

然后在你的模态组件

中

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

有条件地设置模态的宽度取决于

1 个答案: