フィールドアレイは別のコンポーネントにあります

Question

私はredux-form v6.0.1を使用しています。私はすべてのフィールドとそのバインドまたは矢印の機能を強化するために別の部品に<li key={index}>内のレンダリングアクションボタンが使用されていない移動することができ、例から以下のコードを以下のhttp://redux-form.com/6.0.1/examples/fieldArrays/

：私は、ドキュメントの例から、それに対する成分と類似を作成しました（https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md）？

const renderMembers = ({ fields }) => (
    <ul> 
    <li> 
     <button type="button" onClick={() => fields.push({})}>Add Member</button> 
    </li> 
    {fields.map((member, index) => 
     <li key={index}> 
     <button 
      type="button" 
      title="Remove Member" 
      onClick={() => fields.remove(index)}/> 
     <h4>Member #{index + 1}</h4> 
     <Field 
      name={`${member}.firstName`} 
      type="text" 
      component={renderField} 
      label="First Name"/> 
     <Field 
      name={`${member}.lastName`} 
      type="text" 
      component={renderField} 
      label="Last Name"/> 
     <FieldArray name={`${member}.hobbies`} component={renderHobbies}/> 
     </li> 
    )} 
    </ul> 
) 

、 Darek、ありがとうございました。

Answer 1

<li key={index}>内にレンダリングされているすべてのフィールドとアクションボタンを別のコンポーネントに移動して、バインドや矢印の機能が使用されないようにすることはできますか？

確かに。あなたはそれを試して問題に遭遇しましたか？

Answer 2

私は内部にたくさんの配列フィールドを持つ非常に複雑なフォームを持っています。そして、私は矢印の機能がパフォーマンス上非常に悪いことを知っています。

{fields.map((member, index) => 
    <li key={index}> 
    <Fields 
     names={`[${member}.firstname`, `${member}.lastName`]} 
     component={RenderNames} 
     index={index} 
    /> 
    </li> 
)} 

const RenderNames = (fields) => { 
    const removeItem =() => { 
    fields.remove(index); 
    } 

    return (
    <button 
     type="button" 
     title="Remove Member" 
     onClick={removeItem} 
    /> 

    // how to get 'firstname' and 'lastname' here? 
) 
} 

が、フィールドは文書