如何將html代碼作爲變量並使用它？

Question

下面是我的示例代碼.....

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

如果this.state.showAllUser是假的，我中僅顯示三個陣列，或者如果真會全部顯示出來。

我的問題是如何使這個代碼更乾淨，我可以做一個函數或變量，並用它指代功能

Answer 1

您可以使用Array方法來代替，像這樣：

<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部分。

Answer 2

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