条件渲染

参考文档：react.docschina.org/docs/condit…

html代码

 <div id="root"></div>

JS代码

// 已登录Dom结构
        function UserGreeting(props){
            return <h1>Welcome back!</h1>
        }
        // 未登录Dom结构
        function GuestGreeting(props){
            return <h1>Please sign up.</h1>
        }
        // 判断用户是否登录函数
        function Greenting (props){
            console.log(props)
            const isLoggedIn=props.isLoggedIn;//获取传值进来的属性
            if(isLoggedIn){
                return <UserGreeting />//等同于 UserGreeting()   
            }
            return <GuestGreeting /> //等同于 GuestGreeting()        
        }
        ReactDOM.render(
            <Greenting isLoggedIn={false}/>,//isLoggedIn={false} = 将这个属性以对象的形式传进去{isLoggedIn: false}，这样函数内部可以通过 protype.isLoggedIn 获取属性
            document.getElementById('root')
        )

元素变量

可以使用变量来储存元素。 它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。观察这两个组件，它们分别代表了注销和登录按钮：

function LoginButton(props) {
            return (
                <button onClick={props.onClick}>
                    Login
                </button>
            );
        }

        function LogoutButton(props) {
            return (
                <button onClick={props.onClick}>
                    Logout
                </button>
            );
        }

创建一个名为LoginControl的有状态组件

它将根据当前的状态来渲染 或者 。同时它还会渲染上一个示例中的 Greeting

   class LoginControl extends React.Component {
            // 创建构造函数
            constructor(props) {
                // ES6语法 用于继承父级参数
                super(props);
                // 为了在回调中使用 `this`，这个绑定是必不可少的 否则会报Undefined
                // For 登录按钮点击
                this.handleLoginClick = this.handleLoginClick.bind(this);
                // For 注销按钮点击
                this.handleLogoutClick = this.handleLogoutClick.bind(this);
                // 设置默认登录状态为未登录 isLoggedIn:false 下方通过函数改变状态 
                this.state = { isLoggedIn: false };
            }
            handleLoginClick() {
                /* 
                使用 this.setState() 来时刻更新组件 state： 
                这样React就可以监听到state状态发生变化，从而重新渲染DOM结构
                */
                // 设置登录状态为True    
                this.setState({ isLoggedIn: true });
            }
            handleLogoutClick() {
                // 设置登录状态为false
                this.setState({ isLoggedIn: false });
            }
            // 设置函数，for按钮点击事件（登录 or 注销）
            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>
                );
            }
        }
        ReactDOM.render(
            <LoginControl />,
            document.getElementById('root')
        );

阻止组件渲染

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让 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>
                );
            }
        }

        ReactDOM.render(
            <Page />,
            document.getElementById('root2')
        )