学习React中的条件性渲染

现在我们要学习的是如何在React中进行条件性渲染。换句话说，如果一个条件存在，那么我们就会渲染一个特定的信息。如果存在一个不同的条件，那么我们就会向浏览器渲染一个不同的信息。嗯，React不是一种模板语言，所以我们不能访问基于HTML的if或else指令。没问题，我们只需将该逻辑转移到普通的JavaScript中。现在让我们看看如何做到这一点。

---

有条件地渲染一个列表

我们可以从刚才的列表渲染例子开始做起。这只是一个有三个项目的简单数组，然后使用map函数在JSX标记中把它们全部呈现出来。

import React, { Component } from "react";

class Item extends Component {
  state = {
    listitems: ["List Item 1", "List Item 2", "List Item 3"]
  };

  render() {
    return (
      <React.Fragment>
        <ul className="list-group">
          {this.state.listitems.map(listitem => (
            <li className="list-group-item list-group-item-primary">
              {listitem}
            </li>
          ))}
        </ul>
      </React.Fragment>
    );
  }
}

export default Item;

上面的代码很好用，但如果数组中没有项目会怎样？在这种情况下，显示一条 "没有可用的项目 "或类似的信息可能会更好。因此，基于数组中存在一个或多个项目的条件，我们就显示列表，否则，如果数组中没有项目，我们就应该在屏幕上这样说。下面是一个例子，说明我们如何在React中做到这一点。

---

使用一个辅助方法

让我们给组件添加一个辅助方法，以帮助完成这项任务。首先，让我们把这个方法的结构写下来。它看起来有点像下面的内容。

  renderItems() {
    if (this.state.listitems.length === 0) {

      // Display an empty list message

    } else {

      // Display the list items

    }
  }

我们要做的是，首先检查listitems数组中是否有任何项目。如果它没有项目，我们将显示空列表信息。如果它确实有项目，那么我们就需要显示它们。

---

从一个函数中返回 JSX

在任何一个条件下，我们都需要返回一些JSX，可以在我们的React.Fragment标签中使用。所以这就是应该工作的标记。在第一种情况下，我们返回一个JSX表达式，这是一个Bootstrap警报。在另一种情况下，我们只是把渲染列表的逻辑移到这个函数中，并返回它。

  renderItems() {
    if (this.state.listitems.length === 0) {
      return (
        <div class="alert alert-warning" role="alert">
          There are no items to list!
        </div>
      );
    } else {
      return (
        <ul className="list-group">
          {this.state.listitems.map(listitem => (
            <li className="list-group-item list-group-item-primary">
              {listitem}
            </li>
          ))}
        </ul>
      );
    }
  }

---

在JSX中调用一个函数

现在我们已经将JJSX移到了一个决定如何渲染列表的函数中，我们需要包括对该函数的调用。我们在组件的render()函数中对我们的新函数进行调用，像这样。

render() {
  return <React.Fragment>{this.renderItems()}</React.Fragment>;
}

---

测试条件性渲染

所以，如果我们把这一切放在一起，我们就可以看到它是如何工作的。首先，我们将用四个单独的列表项来填充我们的listitems数组。

import React, { Component } from "react";

class Item extends Component {
  state = {
    listitems: ["List Item 1", "List Item 2", "List Item 3", "List Item 4"]
  };

  renderItems() {
    if (this.state.listitems.length === 0) {
      return (
        <div class="alert alert-warning" role="alert">
          There are no items to list!
        </div>
      );
    } else {
      return (
        <ul className="list-group">
          {this.state.listitems.map(listitem => (
            <li className="list-group-item list-group-item-primary">
              {listitem}
            </li>
          ))}
        </ul>
      );
    }
  }

  render() {
    return <React.Fragment>{this.renderItems()}</React.Fragment>;
  }
}

export default Item;

在这种情况下，列表中会有4个项目被渲染出来。很好。

现在，让我们清空这个数组。我们需要看看 renderItems() 函数中的逻辑是否正常工作。

import React, { Component } from "react";

class Item extends Component {
  state = {
    listitems: []
  };

  renderItems() {
    if (this.state.listitems.length === 0) {
      return (
        <div class="alert alert-warning" role="alert">
          There are no items to list!
        </div>
      );
    } else {
      return (
        <ul className="list-group">
          {this.state.listitems.map(listitem => (
            <li className="list-group-item list-group-item-primary">
              {listitem}
            </li>
          ))}
        </ul>
      );
    }
  }

  render() {
    return <React.Fragment>{this.renderItems()}</React.Fragment>;
  }
}

export default Item;

看起来我们现在得到了空列表的信息，这正是我们想要的。

---

React中的条件性渲染总结

这只是一个例子，说明你在使用React时如何处理条件渲染。同样，由于没有像ng-if或v-if这样的自定义指令，我们需要依靠本地JavaScript来实现是否渲染某条信息的逻辑。如果不出意外的话，我们将使用这种技术来提高我们的本地JavaScript能力!