我很困惑。我不久前了解到 HOC。尽管我还不能做出一个真正好的(有用的)HOC,但我了解它是如何工作的。 (如果有人能给我一些 HOC 的现实解决方案,我会很感激:D)。但是……我现在刚刚读到的东西:充当 child
return (
<div>
{this.props.children(this.state.visible)}
</div>
)
{(visible) =>
visible ?
<Placeholder/> : ''
}
它看起来真的很酷,但就像 HOC 一样,我不确定在哪里可以使用它,以及在哪里可以使用它来代替 HOC(反之亦然)。
(实际上,我对作为子函数的函数更加困惑(知道它是如何工作的)。我不知道应该在哪里使用它,以及为什么要使用 HOC)。
最佳答案
我使用 HOC 进行私有(private)路由。下面是一个检查用户是否通过 redux 进行身份验证的示例。
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);
//用法
<PrivateRoute path="/edit/:id" component={SomeEditPage} />
如果用户通过身份验证,那么他可以去编辑某些内容,如果没有,它将把他路由到主路由('/')
关于javascript - 何时使用 HOC。何时使用 Function 作为子函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50234523/