Javascript 如何将html代码作为变量并使用它？

下面是我的示例代码

<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.showaluser==false
？someArray.slice（0,3）.map（函数（用户，索引）{
返回(
{user.name}

)
：someArray.map（函数（用户、索引）{
返回(
{user.name}

)
}

如果this.state.showAllUser为false，我将只显示数组中的三个，如果为true，则显示所有数组

我的问题是如何使这段代码更清晰，我可以创建一个函数或变量并在referefunction中使用它吗？

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

{
（this.state.showaluser==false？someArray.slice（0，3）：someArray.map（（user，index）=>
{user.name}
）；
}

{
（this.state.showaluser==false？someArray.slice（0，3）：someArray.map（（user，index）=>
{user.name}
）；
}

您可以使用数组方法，如下所示：

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

{someArray.filter（函数（el，索引）{
如果（！this.state.showAllUser）{
//打印前3个元素
回报率（指数<3）
}否则{
//全部打印
返回真值
}
})
.map（函数（用户、索引）{
返回（
{user.name}
）
})
}

通过这种方式，您可以非常清楚地控制哪些元素将被显示，哪些元素不被显示

---

而且，您只需编写一次虚拟DOM部件。

您可以使用数组方法，如下所示：

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

{someArray.filter（函数（el，索引）{
如果（！this.state.showAllUser）{
//打印前3个元素
回报率（指数<3）
}否则{
//全部打印
返回真值
}
})
.map（函数（用户、索引）{
返回（
{user.name}
）
})
}

通过这种方式，您可以非常清楚地控制哪些元素将被显示，哪些元素不被显示

---

而且，您只需编写一次虚拟DOM部分。

非常感谢。这真的帮助了我。非常感谢。这真的帮助了我。