設置ref如果條件是truthy

Question

我一直在尋找一個乾淨的解決方案來設置refs，如果條件是真的，但還沒有看到一個很好的解決方案呢。

我像做以下（有點僞代碼）：

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

我只是還沒有在任何地方看到裁判的值應該是什麼，如果我不想設置參考或者這可能只是一種反模式，有人有另一種方式來做到這一點。

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> 

但是，是的，你的解決方案是好的