Kürzel if/else-Anweisung Fehler von fehlendem schließendem Tag

Question

Wenn ich {props.dollarsInputGroup ? <InputGroup><InputGroup.Addon>$</InputGroup.Addon> : ''} verwende, funktioniert die Anweisung nicht, da es kein Schließen-Tag für <InputGroup> gibt. Was fehlt mir hier?

UPDATE

<FormGroup> 
    {props.dollarsInputGroup ? <InputGroup><InputGroup.Addon>$</InputGroup.Addon> : ''} 
    <Input /> 
    {props.dollarsInputGroup ? </InputGroup> : ''} 
    {props.error ? <HelpBlock>{props.error}</HelpBlock> : '' } 
</FormGroup> 

Answer 1

Sie werden müssen entweder die <FormControl /> wiederholen, oder sie definieren einmal als Variable und es zweimal verwenden (evtl. mit einer Funktion). Zum Beispiel:

var formControl = <FormControl />; 
return <FormGroup> 
    {props.dollarsInputGroup ? <InputGroup><InputGroup.Addon>$</InputGroup.Addon>{formControl}</InputGroup> : formControl} 
    {props.error ? <HelpBlock>{props.error}</HelpBlock> : null} 
</FormGroup>; 

Oder ... (obwohl ich denke, das viel weniger lesbar ist)

<FormGroup> 
    {(props.dollarsInputGroup ? ((fc) => <InputGroup><InputGroup.Addon>$</InputGroup.Addon>{fc}</InputGroup>) : ((fc) => fc))(<FormControl />)} 
    {props.error ? <HelpBlock>{props.error}</HelpBlock> : null} 
</FormGroup> 

Obwohl könnten Sie eine Definition verwenden anderswo es ein wenig zu helfen:

function maybeWrapWithDollars(wrapWithDollars, wrappedControl) { 
    if(wrapWithDollars) { 
     return <InputGroup><InputGroup.Addon>$</InputGroup.Addon>{wrappedControl}</InputGroup>; 
    }else{ 
     return wrappedControl; 
    } 
} 
// … 
<FormGroup> 
    {maybeWrapWithDollars(props.dollarsInputGroup, <FormControl />)} 
    {props.error ? <HelpBlock>{props.error}</HelpBlock> : null} 
</FormGroup> 

Answer 2

Merge die Bedingungen:

<FormGroup> 
    {props.dollarsInputGroup ? <InputGroup><InputGroup.Addon>$</InputGroup.Addon><Input /></InputGroup> : <Input />} 
    {props.error ? <HelpBlock>{props.error}</HelpBlock> : '' } 
</FormGroup>