React条件渲染

2020-04-19

在React中,你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。
React中的条件渲染和JavaScript中的一致，使用JavaScript操作符if或者条件运算符来创建表示当前状态的元素，然后让React根据它们来更新UI
先看两个组件

function UserGreting(props){
    return <h1>欢迎回来！<?h1>;
}

function GuestGreetion(props){
    return <h1>请先注册。</h1>
}

我们将创建一个Greetin组件，它会根据用户是否来登录来显示其中之一。

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

ReactDOM.render(
    //尝试修改isLoggedIn={true}:
    <Greeting isLoggedIn={false} />,
    document.getElementById('example')
);

元素变量

你可以使用变量来存储元素，它可以帮你有条件的渲染组件的一部分，而输出的其他部分不会更改，在下面的例子中，我们将要创建一个名为LoginControl的有状态的组件。
他会根据当前的状态来渲染<LoginButton />或<LogoutButton>，它也将渲染前面例子中的<Greeting />.

与运算符&&

你可以通过用花括号包裹代码在JSX中嵌入任何表达式，也包括JavaScript的逻辑与&&,它可以方便低条件渲染一个元素。

function Mailbox(props){
    const unredMessages = props.unreadMessage;
    return(
        <div>
           <h1>Hello!</h1>
           {unreadMessages.length > 0 &&
                <h2>
                    您有{unreadMessages.length}条消息
                </h2>
           }
        </div>
    );
}
const messages = ['React','Re:React','Re:Re：React'];
ReactDOM.render(
    <Mailbox unreadMessages={messages} />,
    document.getElementById('example')
);

在JavaScript中，true&&expression总是返回false.因此，如果条件是true,&&右侧的元素就会被渲染，如果是false，React会忽略并跳过它。

三目运算符

条件渲染的另一种方法是使用JavaScript的条件运算符：

1	condition ? true : false

下面例子中，我们用它来有条件的渲染一小段文本。

render(){
    const isLoggedln = this.state.isLoggedin;
    return(
        The user is{
            isLoggedln ? 'currently':'not'
        }
        logged in.
    );
}

同样它也可以用在较大得表达式中，虽然不太直观：

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

阻止组件渲染

在极少数得情况下，你希望隐藏组件，即使它被其他组件渲染，让render方法返回null而不是它得渲染结果即可实现。
在下面得例子中，<WarningBanner>根据属性warn得条件渲染，如果warn得值是false，则组件不会渲染。

function WarningBanner(props){
    if(!props.warn){
        return null;
    }
    return (
        <div className="warning">
        警告！
        </div>
    );
}

class Page extends React.Component{
    constructor(props){
        super(props){
            this.state={showWarning: true}
            this.handleToggleClick=this.handleToggleClick.bing(this);
        }
    }
    handleToggleClick(){
        this.setState(prevState => ({
            showWarning: !prevState.showWarning
        }));
    }
    render(){
        return(
            <div>
                <WarningBanner warn={this.state.showWarning} />
                <button onClick={this.handleToggleClick}>
                    {this.state.showWarning ? '隐藏' : '显示'} 
                </button>
            </div>
        );
    }
}
ReactDOM.render(
    <Page />,
    document.getElementById('example')
);

组件得render方法返回null并不会影响该组件生命周期方法得回调，例如，componentWillUpdate和cmponentDidUpdate依然可以被调用。