React条件渲染 - Kaiqisan

大家好，都吃了吗？我是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麻烦，但是对于同一个问题有多种解答办法，这无疑让它更加适合大项目的环境。