React 高阶组件介绍

正文

请到「今天看啥」查看全文

在 WrappingComponent 中，可以读取、添加、编辑、删除传给 WrappendComponent 的 props ，也可以用其它元素包裹 WrappendComponent，用来实现封装样式、添加布局或其它操作。

• 组合方式

const HoC = (WrappedComponent, LoginView) => {
    const WrappingComponent = () => {
        const {user} = this.props;  
        if (user) {
            return <WrappedComponent {...this.props} />
        } else {
            return <LoginView {...this.props} />
        }
    };
    return WrappingComponent;
};

上述代码中有两个组件，WrappedComponent 和 LoginView，如果传入的 props 中存在 user ，则正常显示的 WrappedComponent 组件，否则显示 LoginView 组件，让用户去登录。HoC 传递的参数可以为多个，传递多个组件定制新组件的行为，例如用户登录状态下显示主页面，未登录显示登录界面；在渲染列表时，传入 List 和 Loading 组件，为新组件添加加载中的行为。

请到「今天看啥」查看全文