javascript - 如何将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 为 false，则仅显示数组中的三个，如果为 true，则显示全部。

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

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