React学习：条件渲染

Posted 2022-11-28 liyaping

在react中的条件渲染和Vue不一样，react使用的是：使用不同的组件进行封装，然后根据使用的场景再来判断使用哪一个组件

React中的条件渲染和js中的一样，使用js或者其他条件运算符进行不同组件的渲染

1.元素变量

可以使用变量来储存元素。 它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。

//元素变量
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></LogoutButton>
         else 
            button = <LoginButton onClick = this.handleLoginClick></LoginButton>
        
        return (
            <div>
                <Greeting isLoggedIn = isLoggedIn />
                button
            </div>
        )
    

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

2.运算符&&

通过大括号来包裹代码，来判断是否渲染&&后面的代码

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‘];
//   const messages = [];
ReactDOM.render(  <Mailbox unreadMessages=messages />, document.getElementById(‘root‘));

之所以能这样做，是因为在 javascript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。

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

3.三元运算符condition？true：false

condition？（true expression）/true：（false expression）/ false

此处可以是用表达式或者字符串都可以。如果是较为复杂的表达式，建议使用组件抽离

4.组件的渲染阻止

function WarningBanner(props) 
    if (!props.warn)  // 根据传入参数warn进行判断是否进行渲染，如果不进行渲染的话，return null。
      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>
      );
    
  

在组件的render函数中书写return null 并不会影响组件的生命周期函数的执行，例如上述组件的componentDidUpdate依旧会执行