我很困惑。我不久前就了解了HOC。虽然我还没能做出一个非常好(有用)的HOC,但我明白它是如何工作的。 (如果有人能用HOC给我一些现实世界的解决方案,我会感谢它:D)。但是......我现在就读到的东西:作为孩子的功能
return (
<div>
{this.props.children(this.state.visible)}
</div>
)
{(visible) =>
visible ?
<Placeholder/> : ''
}
它看起来非常酷,但就像HOC一样,我不知道我在哪里可以使用它,我在哪里可以使用它而不是HOC(反之亦然)。
(实际上我对作为孩子的功能更加困惑(知道它的工作原理)。我不知道我应该在哪里使用它,以及为什么要通过HOC)。
答案 0 :(得分:0)
我将HOC用于PrivateRouting。以下是检查用户是否使用redux进行身份验证时的一个示例。
ME_PROCESS_REQ_CUST
//使用
import React from 'react';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';
import Header from '../components/Header';
export const PrivateRoute = ({
isAuthenticated,
component: Component,
...rest
}) => (
<Route {...rest} component={(props) => (
isAuthenticated
? (
<div>
<Header />
<Component {...props} />
</div>)
: (<Redirect to="/" />)
)} />
);
const mapStateToProps = (state) => ({
isAuthenticated: !!state.auth.uid
});
export default connect(mapStateToProps)(PrivateRoute);
如果用户经过身份验证,那么他可以去编辑某些内容,如果没有,则会将他路由到主路线(&#39; /&#39;)