React学习:条件渲染

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/b954960630/article/details/79946088

React 中的条件渲染就和在 JavaScript 中的条件语句一样。通过 JavaScript 条件操作符(如 if ) 根据不同的条件 来决定创建渲染不同的元素,并且让 React 更新匹配的 UI 。

仔细阅读代码,你会发现这一章对你收获最大的是怎么让代码写的更简单优雅。


一、怎么用

看下面dome就懂了,顺便看看我们 在多个页面写react 与 在一个页面写react的区别

例:多个页面

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

let obj = {name:'bty',age:12};   //数据

ReactDOM.render(<App {...obj}/>, document.getElementById('root'));

App.js

import React, { Component } from 'react';
import Greeting from './Greeting';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      isLoggedIn:false
    };
  }
  handle = () => {
    this.setState(prevState => ({
      isLoggedIn: !prevState.isLoggedIn
    }));
  }
  render(){  
    let isLoggedIn = this.state.isLoggedIn;
    return (<div>
        <Greeting isLoggedIn={isLoggedIn} name={this.props.name}/>
        <button onClick={this.handle}>
          {isLoggedIn ? '退出登录' : '登录'}
        </button>
      </div>
    );
  }
}

export default App;

Greeting.js

import React, {Component} from 'react';

class Greeting extends Component{
     render(){
        let {name,isLoggedIn} = {...this.props};
        let text = isLoggedIn ? ('welcome you ,' + name + '!') 
                              : 'please login!';
        return (
            <div>
               {text}
            </div>
        );
    }
}
export default Greeting;

执行效果:
这里写图片描述
点击“登陆”后(再点击“退出登录”又回到上面图的样子)
这里写图片描述

例:一个页面(官网上的例子)

这是官网上的例子,但是仔细阅读代码你会发现里面代码太废话,完全可以像上面一样简化代码,写的更优雅。

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 = null;
    /*  实际这么写太废话了,不如看看我上面自己写的,
      代码简化了很多
    */
    //不同的条件,渲染不同的组件
    if (isLoggedIn) {
      //用变量来存储react元素
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

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

function UserGreeting(props) {
  return <h1>welcome you ,{props.name}</h1>;
}

function GuestGreeting(props) {
  return <h1>please login!</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting name={'bty'}/>;
  }
  return <GuestGreeting />;
}

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

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

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

执行效果:同上


二、内联 if 用法

1、boolean && expression

我们可以 在JSX中嵌入任何表达式 ,方法是将表达式包裹在 {} 中。

下面表达式可以正常运行,是因为在 JS 中, true && expression 总是会评估为 expression ,而 false && expression 总是执行为 false 。
因此,如果条件为 true ,则 && 后面的元素将显示在输出中。 如果是 false,React 将会忽略并跳过它。

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')
);

输出:
Hello!
You have 3 unread messages.


注意:

0 && expression ,expression仍然会被渲染。例如,这段代码不会按照你预期的发生,因为当 props.messages 是一个空数组时 0 会被打印:

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

要修复这个问题,确保 && 之前的表达式总是布尔值:

<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

2、condition ? true : false

使用 JavaScript 的条件操作符 condition ? true : false

小技巧:可以这些写,来简化代码
let boolean = true; let a = !boolean;
效果等价于 let boolean = true; let a = boolean ?false : true;

在下面这个例子中,我们使用它来进行条件渲染一个小的文本块:

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>
  );
}

三、防止组件渲染

有时,你可能希望隐藏某个组件,即使它是由另一个组件渲染的。
为此,我们可以return null,而不是其渲染输出。

从组件的 render 方法返回 null 不会影响组件生命周期方法的触发。 例如, componentWillUpdate 和 componentDidUpdate 仍将被调用。

在下面的例子中,根据名为warn的 prop 值,呈现 < WarningBanner/> 。如果 prop 值为 false ,则该组件不渲染:

function Warning(props){
      let warn = props.warn 
                        ? 
                  <div className='warning'>Warning!</div>
                        :
                  null;
      return warn;
}

class Page extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      showWarning:true
    };
  }
  handle = () => {
    this.setState(prevState => ({
      showWarning:!prevState.showWarning
    }));
  }
  render(){
    let showWarning = this.state.showWarning;
    return(
      <div>
        <Warning warn={showWarning} />
        <button onClick={this.handle}>
          {showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }  
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);
/* css */
.warning {
  background-color: red;
  text-align: center;
  width: 100%;
  padding: 10px;
  color: white;
}

输出结果:
这里写图片描述
点击Hide后
这里写图片描述
再点击show又回到第一张图

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页