React的幾種條件渲染
對於一個展示頁面來講，有好幾種展示狀態，在React中，可以根據不同的狀態，渲染組件。也就是條件渲染。不同於Vue的v-if,v-show等框架提供的api，React中的條件渲染的工作方式與JavaScript中條件工作的方式相同。
以下就是條件渲染的幾種方法：
方法一：
創建兩個組件，根據條件顯示兩個組件之一(if-else)
舉例：
function OneRender(props) {
return <h1>Welcome one</h1>;
}
function TwoRender(props) {
return <h1>Welcome two.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <OneRender />;
}
return <TwoRender />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
方法二：
使用變量來存儲元素，這樣可以有條件地渲染組件的部分，剩余部分保持不變。
舉例：
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 = null;
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')
);
方法三：
行內判斷是否渲染,將所有表達式括在花括號中，從而將其嵌入JSX中。
舉例：
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的三元表達式。
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
方法五：
阻止組件渲染，在有些情況下，希望某個組件隱藏自身，即使該組件是由另一個組件渲染也是如此。可以返回null而不是其渲染輸出。null從組件的render方法返回不會影響組件生命周期方法的觸發。
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(prevState => ({
showWarning: !prevState.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')
);
以上就是React的幾種條件渲染的方法，在實際做項目當中，選哪一種條件渲染可以根據自己的需求來進行選擇。