条件付きレンダリングに反応してレンダリングで配列を返す、反応する16

Question

戻り値の関数内でレンダリングの配列要素を返したい。 私が使用している場合：あまりにもうまく動作

{ index === 0 && subindex===0 && 
} 

：コンテナのような

<div> 

が、私は条件付きの行を削除した場合、それは、もともとこのように働いていた、うまく機能

私はエラーを取得します条件付きの前の行：

Syntax error: Unexpected token, expected 

ここに私のコード：

return [ 
     { index === 0 && subindex===0 && 
     <a href="#" onClick={() => fields.remove(subindex)}> 
      <ShowIcon size="25" color="darkred" icon="removecircleblack"/> 
     </a>, 
     } 

     <Field 
     key={fieldKey} 
     name={`${rowValues}.${fieldKey}`} 
     type={subfield.typeInput ? subfield.typeInput : 'text'} 
     typeInput={subfield.typeInput ? subfield.typeInput : 'text'} 
     component={FormField} 
     placeHolder={subfield.placeHolder ? t(`form.${fieldParentKey}-${fieldKey}`) : ''} 
     listSource={subfield.listSource ? aSources[subfield.listSource] : ''} 
     index={subindex + 1} 
     width="270px" 
     icon={subfield.icon} 
     /> 
    ]; 

何が間違っているのですか？

Answer 1

条件を取り除いて{}を削除すると動作します。JSXの中にjs式を入れる必要があります。他の場所で使用すると、オブジェクトを返そうとしています。

このようにそれを書く：

return [ 
    index === 0 && subindex===0 ? 
     <a href="#" onClick={() => fields.remove(subindex)}> 
     <ShowIcon size="25" color="darkred" icon="removecircleblack"/> 
     </a> 
     :null, 

    <Field 
     key={fieldKey} 
     name={`${rowValues}.${fieldKey}`} 
     type={subfield.typeInput ? subfield.typeInput : 'text'} 
     typeInput={subfield.typeInput ? subfield.typeInput : 'text'} 
     component={FormField} 
     placeHolder={subfield.placeHolder ? t(`form.${fieldParentKey}-${fieldKey}`) : ''} 
     listSource={subfield.listSource ? aSources[subfield.listSource] : ''} 
     index={subindex + 1} 
     width="270px" 
     icon={subfield.icon} 
    /> 
];