我有一个连接(到 redux 存储)的组件。我有多个路由都在渲染道具中使用此组件。每次路线改变时,整个组件似乎都被重新安装。有什么办法可以防止这种情况发生吗?我的第一个想法是,我可能每次都会重新实例化组件,因为 render prop 是一个响应路由器调用的函数?这是一些代码:
const routeFunction =
(resource, props) => <CrudWrapper resource={resource} modelId={props.match.params.id} />
export default crudResources.map(resource => ({
path: `/${resource}/:id?`,
link: `/${resource}`,
resource,
// eslint-disable-next-line react/prop-types
render: routeFunction.bind(null, resource)
}));
然后将路由映射到 JSX 中:
{routes.map(route => <Route key={route.path} {...route} />)}
我把路线包裹在一个<Switch>
并认为这可能是导致问题的原因,但即使在拆下开关后,该组件的componentWillMount
每次都会调用方法。
该问题似乎与路线上的关键道具有关。当我省略 key 属性时,组件不会重新安装。一旦我添加它,无论字符串是什么,路由都会重新安装。
EDIT:
这是我的错。由于所有路由都有不同的键,react 会重新挂载它们,因为它们都是不同的。看这里:https://github.com/ReactTraining/react-router/issues/5972 https://github.com/ReactTraining/react-router/issues/5972
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)