htmlコードを変数として作成して使用するには？以下

Question

はthis.state.showAllUserがfalseの場合、私は、配列の3が表示されますかtrueの場合、それらのすべてを表示

<ul> 
    {this.state.showAllUser == false 
     ? someArray.slice(0, 3).map(function(user, index) { 
       return (
        <li key={index}> {user.name}<li> 
      ) 
     : someArray.map(function(user, index) { 
       return (
        <li key={index}> {user.name}<li> 
      ) 
    } 
</ul> 

.....私のサンプルコードです。

私の質問、このコードをよりきれいにする方法です、私は、関数や変数を作成し、機能を参照してくださいにそれを使用することができます

Answer 1

あなたはそうのように、代わりにアレイ方式を使用することができます。？

<ul> 
     {someArray.filter(function(el, index) { 
     if (!this.state.showAllUser) { 
      // Print the first 3 elements 
      return (index < 3) 
     } else { 
      // Print all 
      return true 
     } 
     }) 
     .map(function(user, index) { 
     return (<li key={index}> {user.name}</li>) 
     }) 
    } 
</ul> 

どのような要素が表示されるか、どの要素が表示されないかは非常に明確です。

さらに、仮想DOM部分を1回だけ書き込むことができます。

Answer 2

<ul> 
    { 
    (this.state.showAllUser == false ? someArray.slice(0, 3) : someArray).map((user, index) => <li key={index}> {user.name}<li>); 
    } 
</ul>