JSX内の関数内でリアクション関数を反応させますか？

Question

私のコンポーネントのレンダリング関数で、マークアップでanouther関数を呼び出しています。ここまでは順調ですね。

renderEquipmentOptions() { 
    return (
    <div className="form-check"> 
     <label className="form-check-label"> 
     <input className="form-check-input" type="checkbox" value=""/> 
     Nothing 
     </label> 
    </div> 
) 
} 

ここで、追加のマークアップを生成するためにこの関数にマップを追加します。

renderEquipmentOptions() { 
    const render = this.props.equipment.map((item, i) => { 
    return (
     <div key={i} className="form-check form-check-inline"> 
     <label className="form-check-label"> 
      <input className="form-check-input" type="checkbox" value=""/> 
      {item} 
     </label> 
     </div> 
    ) 
    }); 

    return (
    <div className="form-check"> 
     <label className="form-check-label"> 
     <input className="form-check-input" type="checkbox" value=""/> 
     Nothing 
     </label> 
    </div> 
    {this.render()} 
) 
} 

これは機能しません。 {}で関数をラップして呼び出すことはできないようです。これは関数内の関数なのか？

Answer 1

複数の要素を配列から返さずに関数から戻そうとしているため、機能しません。またrenderはあなたのケース内の関数が、

renderEquipmentOptions() { 
    const render = this.props.equipment.map((item, i) => { 
    return (
     <div key={i} className="form-check form-check-inline"> 
     <label className="form-check-label"> 
      <input className="form-check-input" type="checkbox" value=""/> 
      {item} 
     </label> 
     </div> 
    ) 
    }); 

    return (
    [<div className="form-check"> 
     <label className="form-check-label"> 
     <input className="form-check-input" type="checkbox" value=""/> 
     Nothing 
     </label> 
    </div>, 
    ...render 
    ] 
) 
}