05 【条件渲染】
05 【条件渲染】
在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后,依据应用的不同状态,你可以只渲染对应状态下的部分内容。
基础配置
<style>
.other {
color: #ff0000;
}
</style>
<body>
<div id="app"></div>
<script type="text/babel">
class Demo extends React.Component {
state = {
type: 1,
isLogin:false
}
render() {
const {type} = this.state
return (
<div>
{type}
</div>
);
}
}
ReactDOM.render(<Demo/>, document.getElementById('app'))
</script>
1.条件判断语句
React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if
或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
- 适合逻辑较多的情况
//1. 第一种方法,声明函数返回dom
showMsg = () => {
let type = this.state.type
if (type === 1) {
return (<h2>第一种写法:type值等于1</h2>)
} else {
return (<h2 className="other">第一种写法:type值不等于1</h2>)
}
}
render() {
return (
<div>
{this.showMsg()}
</div>
);
}
页面展示:
![image-20221024141313955](https://i0.hdslb.com/bfs/album/e4ccc5074a4a2c0ff03053844115f4b9a7902d23.png)
render() {
let welcome = ''
let btnText = ''
if (this.state.isLogin) {
welcome = '欢迎回来'
btnText = '退出'
} else {
welcome = '请先登录~'
btnText = '登录'
}
return (
<div>
<h2>{welcome}</h2>
<button>{btnText}</button>
</div>
)
}
![image-20221024141928366](https://i0.hdslb.com/bfs/album/11e95969df2c279a2c9748e85a17bb4be61a3e5a.png)
2.三目运算符
另一种内联条件渲染的方法是使用 JavaScript 中的三目运算符 condition ? true : false
。
- 适合逻辑比较简单
render() {
const { type } = this.state
return (
<div>
{
//3. 第三种方法,利用三目运算符渲染需要渲染的变量
type === 1 ? (
<h2>第二种写法:type值等于1</h2>
) : (
<h2 className="other">第三种写法:type值不等于1</h2>
)
}
</div>
)
}
}
![image-20221024142209840](https://i0.hdslb.com/bfs/album/43cea5edfd354e607925f31a2e0e9efb684276ef.png)
在下面这个示例中,我们用它来条件渲染一小段文本
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
同样的,它也可以用于较为复杂的表达式中,虽然看起来不是很直观:
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn
? <LogoutButton onClick={this.handleLogoutClick} />
: <LoginButton onClick={this.handleLoginClick} />
}
</div>
);
}
就像在 JavaScript 中一样,你可以根据团队的习惯来选择可读性更高的代码风格。需要注意的是,如果条件变得过于复杂,那你应该考虑如何提取组件。
3.与运算符&&
通过花括号包裹代码,你可以在 JSX 中嵌入表达式。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行元素的条件渲染:
- 适合如果条件成立,渲染某一个组件;如果条件不成立,什么内容也不渲染;
render() {
const { type } = this.state
return (
<div>
{type === 1 && <h2>第三种写法:type值等于1</h2>}
{type !== 1 && <h2 className="other">第三种写法:type值不等于1</h2>}
</div>
)
}
}
![image-20221024142459699](https://i0.hdslb.com/bfs/album/f474a79f14306b2e532b9b0090eca7d4113d7fb3.png)
之所以能这样做,是因为在 JavaScript 中,true && expression
总是会返回 expression
, 而 false && expression
总是会返回 false
。
因此,如果条件是 true
,&&
右侧的元素就会被渲染,如果是 false
,React 会忽略并跳过它。
请注意,falsy 表达式 会使 &&
后面的元素被跳过,但会返回 falsy 表达式的值。在下面示例中,render 方法的返回值是 <div>0</div>
。
render() {
const count = 0;
return (
<div>
{count && <h1>Messages: {count}</h1>}
</div>
);
}
4.元素变量
你可以使用变量来储存元素。 它可以帮助你有条件地渲染组件的一部分,而其他的渲染部分并不会因此而改变。
render() {
const { type } = this.state
//2. 第二种方法 声明变量 给变量赋值
let test = null
if (type === 1) {
test = <h2>第四种写法:type值等于1</h2>
} else {
test = <h2 className="other">第四种写法:type值不等于1</h2>
}
return <div>{test}</div>
}
}
![image-20221024142858454](https://i0.hdslb.com/bfs/album/4809a71dd9dacb554f6f009687701cd7aaf2bb83.png)
声明一个变量并使用 if
语句进行条件渲染是不错的方式,但有时你可能会想使用更为简洁的语法,那就是内联条件渲染的方法与运算和三目运算符
5.阻止组件渲染
在极少数情况下,你可能希望能隐藏组件,即使它已经被其他组件渲染。若要完成此操作,你可以让 render
方法直接返回 null
,而不进行任何渲染。
下面的示例中,<WarningBanner />
会根据 prop 中 warn
的值来进行条件渲染。如果 warn
的值是 false
,那么组件则不会渲染:
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>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Page />);
在组件的 render
方法中返回 null
并不会影响组件的生命周期。例如,上面这个示例中,componentDidUpdate
依然会被调用。