Как сделать 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>