このコードの最後のフォームアイテムのアイコンを設定しない方法は？

Question

フォームの検証にReduxフォームを使用しています。 renderinputの内部には多くの入力があり、それぞれには独自のIconがありますが、icon2のないinput2という名前のフィールドを使用する必要があります。残念ながら、それらのどれも働いていない間、私はそれをnull、未定義、falseに設定しました。ここでは、コードは次のようになります。最後

<Icon style={styles.icon} active name={input.name === "card" ? "card" : input.name=== "date" ? "calendar": input.name === "csv" ? "unlock" : input.name === "name" ?"contact":undefined} /> 

他

については

renderInput({ input, label, type, meta: { touched, error, warning } }) { 
    return (
     <Item error={error && touched} style={styles.item}> 

<Icon style={styles.icon} active name={input.name === "card" ? "card" : input.name=== "date" ? "calendar": input.name === "csv" ? "unlock" : input.name === "name" ?"contact":undefined} /> 
       <Input style={styles.input} 
        ref={c => (this.textInput = c)} 
        placeholder={input.name === "card" ? "Card Number": input.name==="date"?"MM":input.name==="date2"?"YY":input.name==="csv"?"CSV": "Name"} 
      placeholderTextColor="#0dc49d" 
        secureTextEntry={input.name === "csv" ? true : false} 
        {...input} 
       /> 
      </Item> 

    ); 
    } 

私はアイコンなしでそれを必要とします。ここではundefinedが使用されていますが、上記のように動作しません。私はこの挑戦をどのように克服できますか？

Answer 1

あなたは条件付きでアイコンをレンダリングすることができます。

renderInput({ input, label, type, meta: { touched, error, warning } }) { 
    const renderIcon = (input.name === "card" || input.name=== "date" || input.name === "csv" || input.name === "name") 
    return (
     <Item error={error && touched} style={styles.item}> 
       { 
        renderIcon && 
        <Icon style={styles.icon} active name={input.name === "card" ? "card" : input.name=== "date" ? "calendar": input.name === "csv" ? "unlock" : input.name === "name" ?"contact":undefined} /> 
       } 
       <Input style={styles.input} 
        ref={c => (this.textInput = c)} 
        placeholder={input.name === "card" ? "Card Number": input.name==="date"?"MM":input.name==="date2"?"YY":input.name==="csv"?"CSV": "Name"} 
      placeholderTextColor="#0dc49d" 
        secureTextEntry={input.name === "csv" ? true : false} 
        {...input} 
       /> 
      </Item> 

    ); 
    }