zoukankan      html  css  js  c++  java
  • [Recompose] Replace a Component with Non-Optimal States using Recompose

    Learn how to use the ‘branch’ and ‘renderComponent’ higher-order components to show errors or messaging when your component is in a non-optimal state. Avoid putting extraneous logic to show errors or messaging into your core component by organizing your non-optimal states into custom higher-order components.

    import React from 'react';
    import { lifecycle, branch, compose, renderComponent } from 'recompose';
    
    const User = ({ name, status }) =>
        <div className="User">{ name }—{ status }</div>;
    
    const withUserData = lifecycle({
                                       componentDidMount() {
                                           fetchData().then(
                                               (users) => this.setState({ users }),
                                               (error) => this.setState({ error })
                                           );
                                       }
                                   });
    
    const UNAUTHENTICATED = 401;
    const UNAUTHORIZED = 403;
    const errorMsgs = {
        [UNAUTHENTICATED]: 'Not Authenticated!',
        [UNAUTHORIZED]: 'Not Authorized!',
    };
    
    const AuthError = ({ error }) => error.statusCode && <div className="Error">{ errorMsgs[error.statusCode] }</div>;
    
    const NoUsersMessage = () =>
        <div>There are no users to display</div>;
    
    
    // Mock Service
    const noUsers = [];
    const users = [
        { name: "Tim", status: "active" },
        { name: "Bob", status: "active" },
        { name: "Joe", status: "inactive" },
        { name: "Jim", status: "pending" },
    ];
    function fetchData() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                // reject({ statusCode: UNAUTHENTICATED });
                // reject({ statusCode: UNAUTHORIZED })
                // resolve(noUsers);
                 resolve(users);
            }, 100);
        });
    }
    
    const hasError = ({error}) => error && error.statusCode;
    const hasNoUser = ({users}) => users && users.length === 0;
    
    const enhance = compose(
        withUserData,
        branch(hasError, renderComponent(AuthError)),
        branch(hasNoUser, renderComponent(NoUsersMessage)),
    );
    
    const User6 = enhance(({users}) => (
        <div className="UserList">
            { users && users.map((user) => <User {...user} />) }
        </div>
    ));
    
    export default User6;
  • 相关阅读:
    去除空格
    常见的Js
    无法访问 ASP 兼容性模式
    asp.net mvc 笔记一
    PowerDesigner如何将设计的表更新到数据库中
    微信小程序基于第三方websocket的服务器端部署
    C# Linq GroupBy 分组过滤求和
    一步一步教你用c# entity framework6 连接 sqlite 实现增删改查
    执行指定iframe页面的脚本
    vs2017 x64 ibatis.net 平台调用 Oracle.DataAccess, Version=2.112.1.0, Culture=neutral, PublicKeyToken=89b483f429c47342 x64
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6861852.html
Copyright © 2011-2022 走看看