Conditional Rendering(条件渲染）

假设我们有一个tag数组，并把它渲染为一个列表：

class Counter extends Component {
    state = {
        tags: ['tag1','tag2','tag3']
    };
    render() { 
        return (
            <div>
                <ul>
                    {this.state.tags.map(tag => <li key={ tag }>{ tag }</li>) }
                </ul>
            </div>
        );
    }
}

• 现在有一个新需求，如果数组列表至少有一个项，我们就渲染它，如果一个都没有，就输出一段文字“没有任何标签”，怎么实现呢？
• 在 jsx 中是没有 if 语句的，因为 jsx 不是模板化引擎。所以为了更好地渲染，我们要回到 js 的层面。

方法一：

• 构建一个辅助方法，这个方法中包含 if 逻辑判断，辅助方法中返回的可以只是简单文字，可以返回一个 jsx 语句，也就是一个react元素（如，p 标签）。这是数组列表为空的情况，列表不为空时，可以按照原来的渲染方式渲染：

class Counter extends Component {
    state = {
        tags: ['tag1','tag2','tag3']
    };
    renderTags() {
        if(this.state.tags.length === 0) return <p>There are no tags!</p>;
        return <ul>{ this.state.tags.map(tag => <li key={ tag }>{ tag }</li>) }</ul>;
    }
    render() { 
        return <div>{ this.renderTags() }</div>;
    }

方法二：

• 假设我们想渲染一个给定条件的情况，只有一个 if 分支，没有else的部分，我们可以添加一个大括号，将渲染条件放在逻辑与"&&"的前面，将要渲染的内容放在逻辑与"&&"的后面：

class Counter extends Component {
    state = {
        tags: []
    };
    renderTags() {
        if(this.state.tags.length === 0) return <p>There are no tags!</p>;
        return <ul>{ this.state.tags.map(tag => <li key={ tag }>{ tag }</li>) }</ul>;
    }
    render() { 
        return <div>
          {this.state.tags.length === 0 && 'Please create a new tag!'}
          { this.renderTags() }
        </div>;
    }

• 保存修改，回到浏览器，我们得到了刚刚设置的信息 'Please create a new tag!'，这组字符只有在数组为空的时候才被渲染，这是怎么实现的呢？
• js不同于其他的编程语言，我们可以在不是布尔值的值之间使用逻辑运算符号：

true && false      //false
true && 'Hi'       //'Hi'
true && 'Hi' && 1  //1
true && false && 1 //false

• 当js编译器处理一个布尔表达式时，它先看第一个值，当第一个值为真的时候，它就看第二个值，若第二个值不是布尔值，js编译器尝试转换成 类真 或 类假 值。空字符串是被视为 类假 的，一个非空的字符串是 类真 的值。
• 在" true && 'Hi' "中，Hi被看成是 类真 值，所以实际上表达式的两边都是 类真 值。这种情况下 js 编译器返回第二个类真值"Hi" .