Redux的形式：顯示自定義部件根據字段值

Question

我有一個FieldArray：

<FieldArray name="elements" component={renderFiles}/> 

數據：

[ 
    {name:'xxx', url:'www.xxx.com', isRepeat: true}, 
    {name:'yyy', url:'', isRepeat: false}, 
    {name:'zzz', url:'', isRepeat: false} 
] 

我需要顯示SwitchField根據URL具有值

const renderFiles = ({ fields }) => { 
    return (
     <div> 
     {fields.map((element, index) => 
      <div key={'preview-wrap-'+index}> 
      <Field 
       name={`${element}.name`} 
       type="text" 
       component={TextField}/> 
      { element.url ? 
       <Field 
       name={`${element}.isRepeat`} 
       component={SwitchField} 
       change={() => { console.log('change')}}/> : 
       '' 
      } 
     </div> 
    )} 
    </div> 
) 
} 

TextField和SwitchField是react-toolbox的自定義組件：

const TextField = ({ input, label, theme, meta: { touched, error }, ...custom }) => (
    <Input type='text' label={label} error={touched ? error : ''} {...input} {...custom} theme={{error:'text-error', ...theme}} /> 
) 

const SwitchField = ({ input, label }) => (
    <Switch checked={!!input.value} label={label} onChange={(value) => {console.log('change')}} {...input} /> 
) 

Answer 1

我可能沒有清楚地瞭解你的問題，因爲它是相當簡單的，但不是有：

{ element.url ? <Field component={SwitchField} .../> : "" } 

你可以這樣做：

{ 
element.url 
    ? <Field component={SwitchField} .../> 
    : <Field component={TextField} .../> 
}