一、条件渲染
React 创建不同的组件来封装各种你需要的行为。然后依据应用的不同状态,你可以只渲染对应状态下的部分内容。
React 条件渲染和 JavaScript 中的一样,使用 JavaScript 操作符 if 或条件运算符去创建元素来表现当前的状态。
先看看这两组件:
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
再创建一个 Greeting 组件,它会使用 if 语句根据用户是否登录来决定显示上面的哪一个组件:
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
二、条件渲染方式
1、if类语句
if类语句条件渲染很简单,可以使用if语句 或 if…else语句 或if…else if…else 语句等等
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
2、三元运算符
三目运算符 condition ? true : false。用它来代替上面的if语句渲染。
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
return isLoggedIn ? <UserGreeting />:<GuestGreeting />;
}
3、与运算符 &&
true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。
//三元运算符:
//function Greeting(props) {
// const isLoggedIn = props.isLoggedIn;
// return isLoggedIn ? <UserGreeting />:null;
//}
//&&运算符:可以使返回 null 的情况的条件渲染更加的简洁
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
return isLoggedIn && <UserGreeting />;
}
4、switch…case语句
多种条件渲染的情况可以使用switch…case
function Greeting(props) {
const str = props.loggedStr;
switch (str) {
case "user":
return <UserGreeting />;
case "guest":
return <GuestGreeting />;
default:
return null;
}
}
ReactDOM.render(
<Greeting loggedStr={"user"} />,
document.getElementById('root')
);
注意switch…case语句永远要加上default情况,因为React组件要么返回元素,要么返回null
三、阻止组件渲染
在极少数情况下,你可能希望能隐藏组件,即使它已经被其他组件渲染。若要完成此操作,你可以让 render 方法直接返回 null,而不进行任何渲染。
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(state => ({
showWarning: !state.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')
);
在组件的 render 方法中返回 null 并不会影响组件的生命周期。例如componentDidUpdate 依然会被调用。
·········································································································································
本文介绍React条件渲染~~请大家多多指教,能get到知识点不要忘了关注点个赞~。