条件が真実ならrefを設定します

Question

条件が真実だがまだ良い解決策を見ていない場合、refsを設定するためのクリーンなソリューションを探していました。

私は、次の（擬似コードの一種）のような何かをした

：

<ul> 
    {this.items.map((item) => { 
     return (
     <li ref={item.isActive === true ? 'activeItem' : null}> 
      {item.name} 
     </li> 
    ); 
    })} 
</ul> 

私はちょうど私が設定したくない場合は、REFの値がどうあるべきかどこにも見たことがありませんrefまたは多分これはちょうど反パターンであり、誰かがこれを行う別の方法を持っています。あなたのソリューションは、罰金だが、あなたは別のアプローチを好む場合

Answer 1

は、あなたが試みることができる：

<ul> 
    {this.items.map((item) => { 
    if(item.isActive) { 
     return (
     <li ref='activeItem'> 
      {item.name} 
     </li> 
     ); 
    } else { 
     return (
     <li> 
      {item.name} 
     </li> 
     ); 
    } 
    })} 
</ul> 

Answer 2

があなたのマップ機能でkey財産を忘れないでください！

本当にそれはあなたに醜いか、あなたのコードでこれらの条件の多くを必要とする場合は、仕事に作るために小さなヘルパーを定義することができ

const onlyIf = (condition, value) => condition ? value : null 

<ul> 
    {this.items.map((item, key)=> 
    <li key={key} ref={onlyIf(item.isActive, 'activeItem')}> 
     {item.name} 
    </li> 
    )} 
</ul> 

しかし、はい、あなたのソリューションは結構です