Question

我在我的应用程序中构建了一个HOC，用于受保护的路由。它接收应在路由中呈现的组件，检查用户是否经过身份验证，然后呈现该组件（如果是）。它可以工作，但它导致组件多次挂载/卸载（调用app.js文件中的render函数的次数）。

来自我app.js的路线

<button type="button">This does not submit form</button>

require_auth.js

<Switch>
    <Route path='/groups/show/:id'
           component={ RequireAuth(Group) } />

    <Route path='/groups/create'
           component={ RequireAuth(CreateGroup) } />

    <Route path='/groups'
           component={ RequireAuth(GroupsMenu) } />

    <Route path='/tutorials/:id' component={ Tutorial } />
    <Route path='/tutorials'     component={ TutorialMenu } />
    <Route path='/ranked'        component={ RankedPlay } />
    <Route path='/casual'        component={ CasualPlay } />
    <Route path='/offline'       component={ OfflinePlay } />
    <Route path='/signup'        component={ Signup } />
    <Route path='/'              component={ Menu } />
</Switch>

如果从任何路线中删除RequireAuth（），则只有在您点击路线时，该组件才会安装一次。但添加它会导致组件每次app.js render（）触发时都会挂载。有没有办法我可以设置它，所以组件只安装一次？

Answer 1

通过在渲染中调用RequireAuth(Component)，您在每个渲染调用中使用HOC装饰Component，使每个渲染返回每个渲染的 new 组件。

在导出之前，您应该使用Group装饰CreateGroup，GroupsMenu和RequireAuth。就像使用react-redux的{{1}}。

一样

ComponentDidMount多次调用

1 个答案: