大家好,都吃了吗?我是Kaiqisan,是一个不善言辞的羞射男孩,对于某一部分HTML代码段,如果符合条件,就渲染,如果不符合就不去渲染,这就是条件渲染,在Vue中,它通过标签里面的
v-if
v-else
就可以实现,但在React中,这个过程的实现会比较麻烦
React实现这个切换会更加依赖JS语法,以下为实现效果
import React from 'react'
// import { Link } from 'react-router-dom'
export default class Demo extends React.Component {
constructor(props) {
super(props)
this.state = {
flag: true
}
}
getComp() {
if (this.state.flag) {
return <div>
<h2 style={{color: '#45AFE8'}}>组件1</h2>
</div>
} else {
return
}
}
render() {
return <div>
<button onClick={() => { this.trans() }}>点击切换</button>
{this.getComp()}
</div>
}
trans() {
this.setState({
flag: !this.state.flag
})
}
}
所有的判断都整合在getComp
这个函数内,如果符合条件,就返回相应的组件,如果您的组件过于冗杂,可以封装成组件,再通过导入的形式来使用。
实现效果
当然也可以修改下这个getComp这个方法来修改条件渲染方式,可以切换渲染,当一个组件不符合条件之后,另一个组件符合渲染条件了,就会马上填上,从而实现了切换。
getComp() {
if (this.state.flag) {
return <div>
<h2 style={{color: '#45AFE8'}}>组件1</h2>
</div>
} else {
return <div>
<h2 style={{color: '#7B89A0'}}>组件2</h2>
</div>
}
}
实现效果
其他方式实现条件渲染
- 三目运算符
import React from 'react'
// import { Link } from 'react-router-dom'
export default class Demo extends React.Component {
constructor(props) {
super(props)
this.state = {
flag: true
}
}
render() {
return <div>
<button onClick={() => { this.trans() }}>点击切换</button>
{this.state.flag ? <div>
<h2 style={{color: '#45AFE8'}}>组件1</h2>
</div> : false}
{/* React模板渲染中能识别false,但是不会渲染 */}
</div>
}
trans() {
this.setState({
flag: !this.state.flag
})
}
}
- switch运算切换
import React from 'react'
// import { Link } from 'react-router-dom'
export default class Demo extends React.Component {
constructor(props) {
super(props)
this.state = {
flag: 0
}
}
getComp() {
switch (this.state.flag) {
case 0 : {
return <div>
<h2 style={{ color: '#45AFE8' }}>组件1</h2>
</div>
}
case 1 : {
return <div>
<h2 style={{ color: '#80e8a2' }}>组件2</h2>
</div>
}
case 2 : {
return <div>
<h2 style={{ color: '#6e3f5c' }}>组件3</h2>
</div>
}
case 3 : {
return <div>
<h2 style={{ color: '#5629bd' }}>组件4</h2>
</div>
}
default: {
return
}
}
}
render() {
return <div>
<button onClick={() => { this.trans() }}>点击切换</button>
{this.getComp()}
</div>
}
trans() {
this.setState({
flag: this.state.flag === 3 ? 0 : this.state.flag + 1
})
}
}
实现效果
- 短路运算符 && 表达式,如果前面是true,就返回后面的,否则返回前面的,又因为React对于false无法渲染,所以什么也没有
import React from 'react'
// import { Link } from 'react-router-dom'
export default class Demo extends React.Component {
constructor(props) {
super(props)
this.state = {
flag: true
}
}
render() {
return <div>
<button onClick={() => {
this.trans()
}}>点击切换
</button>
{this.state.flag && <div>
<h2 style={{ color: '#45AFE8' }}>组件1</h2>
</div>}
</div>
}
trans() {
this.setState({
flag: !this.state.flag
})
}
}
- 使用参数
import React from 'react'
// import { Link } from 'react-router-dom'
export default class Demo extends React.Component {
constructor(props) {
super(props)
this.state = {
flag: true
}
}
render() {
let comp = this.state.flag ? this.state.flag && <div>
<h2 style={{ color: '#45AFE8' }}>组件1</h2>
</div> : <div>
<h2 style={{ color: '#e8cdb0' }}>组件2</h2>
</div>
return <div>
<button onClick={() => {
this.trans()
}}>点击切换
</button>
{comp} {/* 使用参数 */}
</div>
}
trans() {
this.setState({
flag: !this.state.flag
})
}
}
参数放哪里都没关系,这里注重一下思维过程,同时也不建议在使用三木运算符的时候使用过于冗杂的jsx内容,这样容易看眼花,建议封装成组件。
- 使用函数式组件
function transComp(props) {
const flag = props.flag;
if (flag) {
return <Comp1 />;
}
return <Comp2 />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<transComp flag={true} />,
document.getElementById('app')
);
总结
React虽然比Vue麻烦,但是对于同一个问题有多种解答办法,这无疑让它更加适合大项目的环境。