JSX 中内联条件渲染的方法

在 React 中，可以创建不同的组件来封装各种你需要的行为。然后，依据应用的不同状态，只渲染对应状态下的部分内容。
React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。if 语句进行条件渲染是不错的方式，但有时你可能会想使用更为简洁的语法。接下来，我们将介绍几种在 JSX 中内联条件渲染的方法。

1、与运算符 &&

通过花括号包裹代码，你可以在 JSX 中嵌入任何表达式。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行元素的条件渲染。

 <script type="text/babel">
      function Mailbox(props) {
        const unreadMessages = props.unreadMessages;
        const readedMessages = props.readedMeaasges;
        return (
          <div>
            <h1>Hello!</h1>
            {unreadMessages.length > 0 && (
              <h2>You have {unreadMessages.length} unread messages.</h2>
            )}
            {readedMessages.length > 0 && (
              <h2>You have {readedMessages.length} readed messages.</h2>
            )}
          </div>
        );
      }

      const unReadMessages = ["React", "Re: React", "Re:Re: React"];
      const readedMeaasges = ["JS", "HTML", "CSS", "Less", "ES6"];
      ReactDOM.render(
        <Mailbox unreadMessages={unReadMessages} readedMeaasges={readedMeaasges} />,
        document.getElementById("root")
      );
    </script>

2、三目运算符

通过使用 JavaScript 中的三目运算符 condition ? true : false

 <script type="text/babel">
      function Mailbox(props) {
        const unreadMessages = props.unreadMessages;
        const readedMessages = props.readedMeaasges;
        return (
          <div>
            <h1>Hello!</h1>
            {unreadMessages.length > 0 && (
              <h2>You have {unreadMessages.length} unread messages.</h2>
            )}
            {readedMessages.length > 0 && (
              <h2>You have {readedMessages.length} readed messages.</h2>
            )}
            {readedMessages.length < unreadMessages.length ? (
              <h2>You have more unread messages.</h2>
            ) : (
              <h2>You have more readed messages.</h2>
            )}
          </div>
        );
      }

      const unReadMessages = ["React", "Re: React", "Re:Re: React"];
      const readedMeaasges = ["JS", "HTML", "CSS", "Less", "ES6"];
      ReactDOM.render(
        <Mailbox
          unreadMessages={unReadMessages}
          readedMeaasges={readedMeaasges}
        />,
        document.getElementById("root")
      );
    </script>

3、隐藏渲染（阻止组件渲染）

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。可以让 render 方法直接返回 null，而不进行任何渲染。

 <script type="text/babel">
      function WarningBanner(props) {
        if (!props.warn) {
          return null;
        }

        return <div className="warn_area">Waring! Waring! Waring! err~~~</div>;
      }

      class Page extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            showWarning: true
          };
        }

        handleToggleClick() {
          this.setState(
            (state, props) => ({
              showWarning: !state.showWarning
            }),
            () => {
              console.log("修改成功！");
            }
          );
        }

        render() {
          return (
            <div>
              <WarningBanner warn={this.state.showWarning} />
              <button onClick={this.handleToggleClick.bind(this)}>
                {this.state.showWarning ? "Hide" : "Show"}
              </button>
            </div>
          );
        }
      }
      ReactDOM.render(<Page />, document.getElementById("root"));
    </script>

运行在浏览器：

在组件的 render 方法中返回 null 并不会影响组件的生命周期。在上例的基础上添加componentDidUpdate 方法，componentDidUpdate 依然会被调用。

     componentDidUpdate(prevProps, prevState) {
          console.log('prevState'+JSON.stringify(prevState));          
        }