javascript - 根据传入的 props 有条件地设置模态的宽度

Question

我正在尝试使用 ReactCSSTransitionGroup 设置在进入和离开时动画的模式的宽度。我正在 Modal 中创建一个模态并渲染其子项。我需要有条件地将 className 'ui-modal' 设置为 'ui-modal-small' 或 'ui-modal-large'，具体取决于 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

您已经很接近了，您只需将条件语句添加到模态组件渲染方法中，然后在需要时使用派生值即可。例如

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} />;
        }
    }
});