終了タグの欠落によるif/else文のエラー

Question

{props.dollarsInputGroup ? <InputGroup><InputGroup.Addon>$</InputGroup.Addon> : ''}を使用すると、<InputGroup>の終了タグがないため、文が機能しません。私はここで何が欠けていますか？

UPDATE

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

Answer 1

あなたは<FormControl />を繰り返し、または変数として、一度それを定義し、（おそらく機能付き）を2回、それを使用するか必要があります。

（私はこれはあまり読みやすいと思いますが）

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

それとも...

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

あなたはそれを少し助けるために他の場所で定義を使用することができますが：たとえば

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

マージ条件：

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