设置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> 

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