react之条件渲染

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。

React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。

变量的形式

无状态组件

无状态组件顾名思义就是没有状态的组件，如果一个组件不需要管理 state 只是纯的展示，那么就可以定义成无状态组件。无状态组件是在 React 在 v0.14 之后推出的，无状态组件是没有 refs 属性的。

    render() {
        // 无状态组件示例
        const ComponentWzt =  (props)=>(
            <div>
                456
            </div>
        )
        
        const UserGreeting = (props) => (
          return <h1>欢迎回来!</h1>;
        )

        const GuestGreeting(props) =>  (
          return <h1>请先注册。</h1>;
        )
        
        const Greeting(props) => (
          const isLoggedIn = props.isLoggedIn;
          if (isLoggedIn) {
            return <UserGreeting />;
          }
          return <GuestGreeting />;
        )
        
        return (
            <div className="leg">
                // 尝试修改 isLoggedIn={true}:
                <Greeting isLoggedIn={false} />,
            </div>
        )
    }

&&运算符

render() {
    return (
        {
            unreadMessages.length > 0 &&   // unreadMessages的length的值大于0 才会渲染
            <h2>
                You have {unreadMessages.length} unread messages.
            </h2>
        }
    ) 
}

三元表达式

render() {
        const {placeholderVal, imgJudge, val, data} = this.state; // 获取状态中的变量
        
        const UserGreeting = (props) => (
          return <h1>欢迎回来!</h1>;
        )

        const GuestGreeting(props) =>  (
          return <h1>请先注册。</h1>;
        )
        
        return (
            <div className="leg">
                {
                    data.length === 0 ? <UserGreeting /> : <GuestGreeting />
                }
            </div>
        )
    }

阻止渲染

render() {
        const UserGreeting = (props) => (
            if (！props.warn) {
                return null; // 如果不想渲染则可以返回null
            }
            return <h1>欢迎回来!</h1>;
        )

        const GuestGreeting(props) =>  (
            return <h1>请先注册。</h1>;
        )
        
        return (
            <div className="leg">
                {
                    data.length === 0 
                    ?  <UserGreeting warn={false} />  // 传值为false时，则不渲染
                    : <GuestGreeting />
                }
            </div>
        )
    }