web前端高级React - React从入门到进阶之React条件渲染

系列文章目录

文章目录

一、React元素的条件渲染

在React中，我们可以创建不同的组件来封装不同的业务逻辑，然后再根据业务需要，我们可以只渲染满足某些条件的组件

React元素的条件渲染跟JavaScript的是一样的，也是使用运算符if语句或者条件运算符来根据条件渲染不同的组件

下面我们将以一个打招呼的小案例来展示一下React中条件渲染的基本使用

首先我们分别定义两个组件一个是登录状态的欢迎组件，一个是未登录状态的提示登录组件

最后再创建一个总的问候组件，然后根据是否已经登录（这里我们利用props属性值来模拟）来决定该渲染哪个组件

function UserGreeting(props){
    
    
	return <h1>欢迎您!</h1>
}

function GuestGreeting(props){
    
    
	return <h1>请先登录哦</h1>
}

function Greeting(props){
    
    
	let isLogin = props.isLogin;
	if(isLogin){
    
    
		return <UserGreeting />
	}
	return <GuestGreeting />
}

ReactDOM.render(
	<Greeting isLogin={
    
    true} />,
	document.getElementById('root')
);

运行上面的代码，页面上将会出现“欢迎您”，也就是说UserGreeting组将将会被渲染

二、元素变量

我们还可以通过变量来存储元素，这样可以帮助我们有条件的渲染组件的一部分，而其他的渲染部分并不会因此而改变。

还是基于上面的问候语案例，比如除了在页面上显示对应的问候语外，我们还想在下面添加两个按钮：登录和注销

当用户是登录状态时，渲染注销按钮，相反当用户是注销状态时渲染登录按钮。

并且我们会将这两个按钮对应的元素保存在同一个button变量中

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);
   this.handleLoginClick = this.handleLoginClick.bind(this);
   this.handleLogoutClick = this.handleLogoutClick.bind(this);
   this.state = {
    
    isLoggedIn: false};
 }

 handleLoginClick() {
    
    
   this.setState({
    
    isLoggedIn: true});
 }

 handleLogoutClick() {
    
    
   this.setState({
    
    isLoggedIn: false});
 }

 render() {
    
    
   const isLoggedIn = this.state.isLoggedIn;
   let button;
   if (isLoggedIn) {
    
    
     button = <LogoutButton onClick={
    
    this.handleLogoutClick} />;
   } else {
    
    
     button = <LoginButton onClick={
    
    this.handleLoginClick} />;
   }

   return (
     <div>
       <Greeting isLoggedIn={
    
    isLoggedIn} />
       {
    
    button}
     </div>
   );
 }
}

ReactDOM.render(
 <LoginControl />,
 document.getElementById('root')
);

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

三、与运算符&&

前面学习JSX语法的时候，我们知道：JSX语法中，我们可以通过花括号包裹代码的形式在JSX中嵌入表达式，这也包括JavaScript中的逻辑与（&&）运算符。它可以让我们很方便的进行元素的条件渲染

function Mailbox(props) {
    
    
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {
    
    unreadMessages.length > 0 &&
        <h2>
          You have {
    
    unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={
    
    messages} />,
  document.getElementById('root')
);

上面的代码中之所以能这样做，是因为在 JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。

因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它

需要注意的是，返回 false 的表达式会使 && 后面的元素被跳过，但会返回 false 表达式。在下面示例中，render 方法的返回值是 < div >0</ div >，而不是< div >Messages：0</ div >，因为0转换我boolean就是false，所以直接返回了false表达式
render() {
     
     
 const count = 0;
 return (
   <div>
     {
     
      count && <h1>Messages: {
     
     count}</h1>}
   </div>
 );
}

四、三目运算符

另一种内联条件渲染的方法是使用 JavaScript 中的三目运算符 condition ? true : false。
在下面这个示例中，我们用它来条件渲染一小段文本

render() {
    
    
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{
    
    isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

同样的，它也可以用于较为复杂的表达式中，虽然看起来不是很直观：

render() {
    
    
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {
    
    isLoggedIn
        ? <LogoutButton onClick={
    
    this.handleLogoutClick} />
        : <LoginButton onClick={
    
    this.handleLoginClick} />
      }
    </div>
  );
}

就像在 JavaScript 中一样，我们可以根据团队的习惯来选择可读性更高的代码风格。但要注意的是，如果条件变得过于复杂，那就应该考虑组件的提取和封装了。

五、阻止组件渲染

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让 render 方法直接返回 null，而不进行任何渲染。
下面的示例中，< WarningBanner /> 会根据 prop 中 warn 的值来进行条件渲染。如果 warn 的值是 false，那么组件则不会渲染:

function WarningBanner(props) {
    
    
  if (!props.warn) {
    
    
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

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

  handleToggleClick() {
    
    
    this.setState(state => ({
    
    
      showWarning: !state.showWarning
    }));
  }

  render() {
    
    
    return (
      <div>
        <WarningBanner warn={
    
    this.state.showWarning} />
        <button onClick={
    
    this.handleToggleClick}>
          {
    
    this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);

在组件的 render 方法中返回 null 并不会影响组件的生命周期。例如，上面这个示例中，componentDidUpdate 依然会被调用。

web前端高级React - React从入门到进阶之React条件渲染

系列文章目录

文章目录

一、React元素的条件渲染

二、元素变量

三、与运算符&&

四、三目运算符

五、阻止组件渲染

猜你喜欢