【react】手把手学习react - 元素条件渲染

西瓜watermelon
1,495 阅读6分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

前言

大家好，上一篇文章react事件处理中我们学习了react中的事件处理，通过学习我们知道react中的事件跟传统的dom事件类似，主要就是注意一些语法规范即可，没有什么难度。那么接下来今天的分享我们将继续学习react中的另一个知识点：条件渲染

React元素的条件渲染

在JavaScript中我们经常会用到if else-if else等这种条件运算符来根据不同的条件实现不同的功能，在vue中也会用到v-if指令来进行不同组件的渲染。同样react也是支持这种条件渲染的。在我们的日常开发中我们肯定会遇到各种各样不同的业务场景，那么我们不可能把所有的业务场景全都写在同一个组件中，在这种情况下一般我们会根据不同的业务逻辑封装成不同的业务组件或模块，然后再根据不同的条件来进行对应业务组件的渲染，这种渲染就是我们所说的条件渲染。React中元素的条件渲染跟JavaScript一样，也是使用运算符if或者其它条件运算符来根据不同条件渲染不同的组件。下面我们来看这样一种场景：一般我们在做系统或者网站时都会涉及到用户登录，如果登录了则显示用户的基本信息，如果未登录则提示用户去登录，这个时候其实就会涉及到条件渲染了，如下代码：

function Welcome(props){
    return <h1>欢迎您!</h1>
}
function Register(props){
    return <h1>请先登录或注册哦</h1>
}
function Login(props){
    let isLogin = props.isLogin;
    if(isLogin){
        return <Welcome />
    }
    return <Register />
}
ReactDOM.render(
    <Login isLogin={true} />,
    document.getElementById('root')
);

上面代码中我们分别定义两个状态组件一个是已经登录的欢迎组件Welcome，另一个是未登录状态的提示注册或登录组件Register。然后再创建一个总的登录组件Login，并根据是否已经登录（这里我们利用props属性值来模拟）来决定该渲染哪个组件，这里就用到了条件渲染，代码运行后，页面上将会出现“欢迎您”，也就是说Welcome组将将会被渲染。

元素变量

前面我们说过react中的组件分为类组件和函数组件，其本质其实就是JavaScript中的类和函数，那么既然是类或者函数，同样也能在组件里面使用变量，我们知道js变量是可以保存任何值的，既然这样我们就可以通过变量来存储元素，然后直接用变量进行渲染。还是基于上面登录的案例，如果用户登录后除了显示基本信息外，我们再显示一个注销按钮，用户可以自行退出登录。而如果用户未登录，则显示一个登录按钮用于登录操作，这时我们就可以借助变量和条件渲染实现，我们将上面的代码来改造一下：

 function LoginButton(props) {
  return <button onClick={props.onClick}>Login</button>;
}
function LogoutButton(props) {
  return <button onClick={props.onClick}>Logout</button>;
}

class LoginControl extends React.Component {
  constructor(props) {
    super(props); 
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.xxx} />;
    } else {
      button = <LoginButton onClick={this.xxx} />;
    }
    return (
      <div>
        <Login isLoggedIn={true} />
        {button}
      </div>
    );
  }
}
ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

上面代码中我们定义了两个函数组件LoginButton和LogoutButton分别表示登录和注销按钮，另外又定义了一个类组件LoginControl，在该类组件的render函数中，我们定义了一个变量button然后根据不同的登录状态赋值不同的组件，然后直接用变量进行渲染，这样既满足了我们的新需求，同时也不会影响到原来的业务。

运算符

上面我们已经讲了声明一个变量并使用if语句来进行有条件的渲染组件，但有时if语句用起来可能会觉得很麻烦，那么有没有更简洁的语法呢，答案是肯定的。接下来我们再来看几个JSX中内联条件渲染的方法。

  • 逻辑与运算符 && 前面学习JSX语法的时候，我们知道：JSX语法中，我们可以通过花括号包裹代码的形式在JSX中嵌入表达式，其实就是在花括号中写js代码，既然是js代码那么js的一些基本语法必然也是都支持的，包括JavaScript中的逻辑与 && 运算符。它可以让我们很方便的进行元素的条件渲染，看下面这样一段代码：
 render() {
  const count = 0;
  return (
    <div>
      { count && <h1>Messages: {count}</h1>}
    </div>
  );
}

上面的代码中之所以能这样做，是因为在 JavaScript 中，true && expression 总是会返回后面的expression, 而 false && expression 总是会返回 false。因此，如果条件是 true，&&右侧的h1元素就会被渲染，而如果是 false，React则会忽略并直接跳过。在上面示例中，render 方法的返回值是 < div >0</ div >，而不是< div >Messages：0</ div >，这时因为0会被转换为布尔类型就是false，所以直接返回了false表达式。

  • 三目运算符（也叫三元运算符） 同样还有另一种内联条件渲染的方法，就是使用 JavaScript 中的三目运算符 condition ? true : false。 这个使用起来也很简单跟JavaScript中的用法是一样的，我们就不详细介绍了，直接来看一个小案例：还是上面显示Message的案例我们还可以像下面这样使用三目运算符来渲染：
 render() {
  const count = 0;
  return (
    <div>
      { count>0 ? <h1>Messages: {count}</h1> : <h1>No Messages</h1>}
    </div>
  );
}

阻止组件渲染

在react中还有一个叫做阻止组件渲染的概念，那么什么是阻止组件渲染呢，其实说白了就是在组件中return一个null，即组件渲染了后不输出任何内容。在正常的组件中一般我们都会或多或少的返回一些元素，那么只要这个组件被渲染了就会在页面上显示相应的内容。但也有一些特殊情况，比如在写代码时我们还是正常的去渲染组件，但只有在满足某种条件的情况下才会输出组件内容，否则就不去输出任何内容，这种情况下我们就可以使用阻止组件渲染的方式实现。上面说到阻止组件渲染其实就是在组件中返回一个null，从而不进行任何渲染。 下面我们来看一个展示提示消息的案例，下面我们封装一个Messageinfo的组件，然后通过一个变量来控制是否渲染消息：

function Messageinfo(props) {
  if (!props.show) {
    return null;//阻止渲染
  }
  return (<div>我来了，我没有被阻止渲染</div>);
}

class Message extends React.Component {
  render() {
    return (
      <div>
        <Messageinfo show={true} />
      </div>
    );
  }
}

总结

本次分享我们学习了react中的条件渲染，以及jsx语法中条件渲染的两种运算符，最后还提到了在很少数情况下会用到的阻止组件渲染。今天的学习就到这里了。

avatar
文章
阅读
粉丝