Question

我有一个用于表单组的可重用组件，但它并不总是显示标签。我在FormControl中有一个样式填充，用于将使用的控件与标签分开，但是即使标签不存在，它也会显示填充。我如何有条件地写这个？如果没有标签，则删除样式或style={{paddingTop: 0}}

这里是组件

const CMInputGroup = (props, context) => {
    const classNames = [props.classes.label];
    if (props.className) {
        classNames.push(props.className);
    }
    if (props.complexLabel) {
        <div style={{marginTop: -23}} complexLabel={props.children}/>;      
    } else {
        <FormLabel 
            component="label" 
            className={classNames.join(' ')}>
            {props.title}
        </FormLabel>;
    }


    let inputStyle = {marginTop: 0, marginBottom: 0};
    if (props.topMargin) inputStyle = {marginTop: 25, marginBottom: 0};
    if (props.botMargin) inputStyle = {marginTop: 0, marginBottom:35};
    if (props.listMargin) inputStyle = {marginTop: 16, marginBottom:8};
    if (props.noMargin) inputStyle = {marginTop: 0, marginBottom:0};
    return (
        <FormControl 
            className={classNames.join(' ')}
            disabled={props.disabled}
            component="div" 
            style={inputStyle}
            fullWidth={props.fullWidth}
            error={props.error}
            required={props.required}
            aria-describedby={props.aria}>
            {context.t(props.title)}                                
            {props.complexLabel}                
            <FormGroup style={{paddingTop:10}}> //This is the line I want to behave programmatically
                {props.control}
            </FormGroup>
        </FormControl> 
    );
};

及其使用的3种变体

带有简单标签

<CMInputGroup 
     title="player.list.newItem.label.description"
     control={
        <CMInputField
            type="text"
            value={this.state.desc}
            onChange={this.handleChangeDesc}
        />
     }
/>

带有复杂标签

<CMInputGroup 
     complexLabel={
         <div>
            {this.context.t("player.properties.label.playergroups")}
            <Button
               variant="fab"
               color="primary">
               Activate Players
            </Button>
          </div>
     }
     control={
        <CMInputField
            type="text"
            value={this.state.players}
            onChange={this.handleChangePlayers}
        />
     }
/>

没有标签

<CMInputGroup 
     control={
        <CMInputField
            type="text"
            value={this.state.players}
            onChange={this.handleChangePlayers}
        />
     }
/>

预先感谢

如果在可重复使用的组件中渲染道具，请调整样式-React

0 个答案: