Javascript 根据传入的道具有条件地设置模态的宽度

我正在尝试使用ReactCSStransitongGroup设置在进入和离开时设置动画的模式的宽度。我正在

modal

中创建一个modal并渲染其子对象。我需要根据this.props.size的大小，有条件地将类名“ui-modal”设置为“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;

从“React”导入React；
从'react dom'导入{render}；
从“react addons css转换组”导入ReactCSTranslationGroup；
导入“../modal.css”；
const Modal=React.createClass({
render（）{
如果（此.props.isOpen）{
返回(
{this.props.children}
);
}否则{
返回；
}
}
});
const UiModal=React.createClass({
getInitialState（）{
返回{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；
返回(
从底部进入
{this.props.openBtnText}
{header}
{小标题}
{body}
{closeBtnText}
{optionalFooterText}
);
}
});
导出默认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+'}
   />

---

如果您成功了，只需将条件语句添加到模态组件渲染方法中，然后在需要时使用派生值即可。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;

render（）{
const{openBtnText，header，subHeader，body，footer，optionalFooterText，closeBtnText，size}=this.props；
const modalSize=size=='large'？'ui-model-large'：'ui-model-small'；
返回(
从底部进入
{this.props.openBtnText}
{header}
{小标题}
{body}
{closeBtnText}
{optionalFooterText}
);
}
});
导出默认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} />;
        }
    }
});

const Modal=React.createClass({
render（）{
//在需要的地方使用尺码。
const size=this.props.size；
如果（此.props.isOpen）{
返回(
{this.props.children}
);
}否则{
返回；
}
}
});

我在该组件中没有看到

const

语句。如何将

size

拉入模态组件？当我尝试在模态中获取this.props.size时，它返回未定义。我已尝试添加const{size}=this.props，但它在模态中似乎无法访问。对模态组件的调用是什么样子的？添加到原始问题^Hi！谢谢你的帮助，

trigger container

不是实际的模态（它只是触发模态打开的按钮）——我需要以某种方式附加所述类名，这只会给我带来错误。在当前实现中设置模态宽度的类名是

modal

中的“ui-modal”。如果我理解正确，您正在尝试将大小作为道具传递给模态。您会遇到哪些错误？您应该像这样将size prop传递给Modal-

。我已经将上面的

size={size}

应用于

Modal

，而实际上根本没有应用类名。。我仍然只得到了在

modal

copmonent中给出的“ui-modal”，而不是ui-modal。它实际上并没有在这里更改ui模态类名：

{this.props.children}

在模态组件中，您需要-

const size=this.props.size

然后在需要应用CSS类名的任何地方使用常量。当我在

模式中尝试这样做时，this.props.size返回未定义。当我在
UiModal
中得到this.props.size时，它会完美地返回。