React学习之条件渲染

た入场券 2022-12-02 15:27 145阅读 0赞

### **说明：本系列所有demo代码的github地址为：[https://github.com/Brucewu998/react.js-learning][https_github.com_Brucewu998_react.js-learning]，笔者会不断更新这些代码，本篇代码在目录下demo-07文件夹下。** ###

### 条件渲染 ###

在React中，我们可以根据不同的需求来创建不同的组件，有时候在一些特定的场景中，我们需要呈现不同的状态，这个时候我们就可以利用条件渲染来完成这个需求。React中的条件渲染和JavaScript中一样，使用if运算或者条件运算符创建元素表示当前的状态，然后可以根据这些条件运算来更新UI。

这里列举一个登录的例子，例如有如下组件：

function Greeting(props) {
        const isLoggedIn = props.isLoggedIn;
        if (isLoggedIn) {
            return <h1>欢迎回来</h1>
        }
    
        return <h1>请登录</h1> 
    }

当向组件传递的isLoggedIn值为真时，表示登录状态，这个时候<h1>欢迎回来</h1>就会被渲染出来，反之，当为退出状态时，<h1>请登录</h1>就会被渲染出来。

当然，这里除了使用if来判断，也可使用三目运算符来进行条件渲染：

function Greeting(props) {
        return <h1>{props.isLoggedIn ? "欢迎回来" : "请登录"}</h1> 
    }

由此我们可以看出，有些情况下使用三目运算符要比使用if条件判断代码更加简洁，但两者实现的功能一样。

下面将这个实例完整代码附上，这个在[demo7\_条件渲染.html][demo7_.html]：

class LoginControl extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                isLoggedIn: false
            }
            this.handleLoginClick = this.handleLoginClick.bind(this);
            this.handleLogoutClick = this.handleLogoutClick.bind(this);
        }
    
        handleLoginClick() {
            this.setState({isLoggedIn: true});
        }
        handleLogoutClick() {
            this.setState({isLoggedIn: false});
        }
        render() {
            const isLoggedIn = this.state.isLoggedIn;
            let button;
            if (isLoggedIn) {
                button = <LogoutButton onClick={ this.handleLogoutClick} />;
            } else {
                button = <LoginButton onClick={ this.handleLoginClick } />;
            }
    
            return (
                <div>
                    <Greeting isLoggedIn={ isLoggedIn } />
                    { button }
                </div> 
            )
        }
    }

上面代码涉及到两个组件：登录与退出：

function LoginButton(props) {
        return (
            <button onClick={ props.onClick }>
                登录
            </button>
        )
    }
    
    function LogoutButton(props) {
        return (
            <button onClick={ props.onClick }>
                退出
            </button>
        )
    }

最终效果：

![20200831235302647.png][]    ![20200831235315756.png][]

### 阻止条件渲染 ###

有的情况下，我们希望隐藏一些已经渲染出来的组件，这个时候我们可以使render方法直接返回null，不进行任何渲染。

创建一个组件：

function WarningBanner(props) {
        if(!props.warn) {
            return null;
        }
        return (
            <div className="warning">
                这是一条警告!
            </div>
        );
    }

当warn属性为false时，我们不返回任何元素，只返回null。这个时候就可以阻止条件渲染,完整代码在[demo7\_阻止组件渲染.html][demo7_.html 1]：

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>
                    <button className="button" onClick={ this.handleToggleClick }>
                        {this.state.showWarning ? "隐藏" : "显示"}
                    </button>
                    <WarningBanner warn={ this.state.showWarning } />
                </div>
            )
        }
    }

当我们点击显示的时候，会出现“这是一条警告”的提示，当点击隐藏的时候，则不会出现任何提示，因为这个时候传递的warn为false,返回的组件时null,所以render在渲染的时候渲染的内容为null,自然不会有仍和提示，效果如下图：

![20200901000254711.png][]    ![20200901000306905.png][]

**上一篇**： **[React学习之事件处理][React]**

**下一篇： **

[https_github.com_Brucewu998_react.js-learning]: https://github.com/Brucewu998/react.js-learning
[demo7_.html]: https://github.com/Brucewu998/react.js-learning/blob/master/demo-07/demo7_%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93.html
[20200831235302647.png]: https://img-blog.csdnimg.cn/20200831235302647.png
[20200831235315756.png]: /images/20221123/5381e3015ad941a5a27761c524300899.png
[demo7_.html 1]: https://github.com/Brucewu998/react.js-learning/blob/master/demo-07/demo7_%E9%98%BB%E6%AD%A2%E7%BB%84%E4%BB%B6%E6%B8%B2%E6%9F%93.html
[20200901000254711.png]: https://img-blog.csdnimg.cn/20200901000254711.png
[20200901000306905.png]: /images/20221123/b2f66cc6c47e4b42aec66045bc4b94a8.png
[React]: https://blog.csdn.net/qq_37338983/article/details/108253727