条件付きで渡された小道具に応じてモーダルの幅を設定します

Question

ReactCSSTransitionGroupを使用して入力時にアニメーション化されるモーダルの幅を設定しようとしています。私はModalのモーダルを作成し、その子をレンダリングしています。私は条件付きでclass.Nameを 'ui-modal'に設定する必要があります。これはthis.props.sizeの内容によって 'ui-modal-small'または 'ui-modal-large'になります。私は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} />; 
     } 
    } 
});