react條件渲染的幾種方式

react條件渲染的幾種方式

在 React 中,你可以創建不同的組件來封裝各種你需要的行為。然後,依據應用的不同狀態,你可以只渲染對應狀態下的部分內容。

React 中的條件渲染和 JavaScript 中的一樣,使用 JavaScript 運算符 if 或者條件運算符去創建元素來表現當前的狀態,然後讓 React 根據它們來更新 UI。

觀察這兩個組件:

function UserGreeting(props) {

return

Welcome back!

;

}

function GuestGreeting(props) {

return

Please sign up.

;

}

再創建一個 Greeting 組件,它會根據用戶是否登錄來決定顯示上面的哪一個組件。

function Greeting(props) {

const isLoggedIn = props.isLoggedIn;

if (isLoggedIn) {

return <usergreeting>;

}

return <guestgreeting>;

}

ReactDOM.render(

// Try changing to isLoggedIn={true}:

<greeting>,

document.getElementById('root')

);

這個示例根據 isLoggedIn 的值來渲染不同的問候語。

元素變量

你可以使用變量來儲存元素。 它可以幫助你有條件地渲染組件的一部分,而其他的渲染部分並不會因此而改變。

觀察這兩個組件,它們分別代表了註銷和登錄按鈕:

function LoginButton(props) {

return (

<button>

Login

);

}

function LogoutButton(props) {

return (

<button>

Logout

);

}

在下面的示例中,我們將創建一個名叫 LoginControl 的有狀態的組件。

它將根據當前的狀態來渲染 <loginbutton> 或者 <logoutbutton>。同時它還會渲染上一個示例中的 <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;

if (isLoggedIn) {

button = <logoutbutton>;

} else {

button = <loginbutton>;

}

return (

<greeting>

{button}

);

}

}

ReactDOM.render(

<logincontrol>,

document.getElementById('root')

);

聲明一個變量並使用 if 語句進行條件渲染是不錯的方式,但有時你可能會想使用更為簡潔的語法。接下來,我們將介紹幾種在 JSX 中內聯條件渲染的方法。

與運算符 &&

通過花括號包裹代碼,你可以在 JSX 中嵌入任何表達式。這也包括 JavaScript 中的邏輯與 (&&) 運算符。它可以很方便地進行元素的條件渲染。

function Mailbox(props) {

const unreadMessages = props.unreadMessages;

return (

Hello!

{unreadMessages.length > 0 &&

You have {unreadMessages.length} unread messages.

}

);

}

const messages = ['React', 'Re: React', 'Re:Re: React'];

ReactDOM.render(

<mailbox>,

document.getElementById('root')

);

之所以能這樣做,是因為在 JavaScript 中,true && expression 總是會返回 expression, 而 false && expression 總是會返回 false。

因此,如果條件是 true,&& 右側的元素就會被渲染,如果是 false,React 會忽略並跳過它。

三目運算符

另一種內聯條件渲染的方法是使用 JavaScript 中的三目運算符 condition ? true : false。

在下面這個示例中,我們用它來條件渲染一小段文本

render() {

const isLoggedIn = this.state.isLoggedIn;

return (

The user is {isLoggedIn ? 'currently' : 'not'} logged in.

);

}

同樣的,它也可以用於較為複雜的表達式中,雖然看起來不是很直觀:

render() {

const isLoggedIn = this.state.isLoggedIn;

return (

{isLoggedIn ? (

<logoutbutton>

) : (

<loginbutton>

)}

);

}

就像在 JavaScript 中一樣,你可以根據團隊的習慣來選擇可讀性更高的代碼風格。需要注意的是,如果條件變得過於複雜,那你應該考慮如何提取組件。

阻止組件渲染

在極少數情況下,你可能希望能隱藏組件,即使它已經被其他組件渲染。若要完成此操作,你可以讓 render 方法直接返回 null,而不進行任何渲染。

下面的示例中,<warningbanner> 會根據 prop 中 warn 的值來進行條件渲染。如果 warn的值是 false,那麼組件則不會渲染:

function WarningBanner(props) {

if (!props.warn) {

return null;

}

return (

Warning!

);

}

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 (

<warningbanner>

<button>

{this.state.showWarning ? 'Hide' : 'Show'}

);

}

}

ReactDOM.render(

<page>,

document.getElementById('root')

);

在組件的 render 方法中返回 null 並不會影響組件的生命週期。例如,上面這個示例中,componentDidUpdate 依然會被調用。


經典前端面試題每日更新,歡迎參與討論,地址:https://github.com/daily-interview/fe-interview。


分享到:


相關文章: