redux 如何在react router v6中传递props到子类组件而不使用？

jslywgbw 于 2023-10-19 发布在 React

关注(0)|答案(1)|浏览(124)

我在一个项目中将React Router从v3迁移到v6，事情变得很混乱，因为我有一些React函数组件和一些React类组件，出于性能原因，我想将它们保留为类。我想告诉你，我的项目是用React Redux构建的。我已经迁移了路线，它一直工作得很好。在我的应用程序组件中，我使用了mapStateToProps的选择器，这样我就可以让所有的孩子都可以使用这些 prop ，正如你在下面看到的。

const childrenWrapper = React.Children.map(props.children, child => {
  return React.cloneElement(child, {
    currentOrganization: currentOrganization,
    organizationSlug: organizationSlug,
    eventSlug: eventSlug,
    isPreview: isPreview,
    user: user,
  });
});

const mapStateToProps = createStructuredSelector({
  user: selectUser(),
  currentOrganization: selectCurrentOrganization(),
  isLoaded: selectLoaded(),
  organizationCount: selectOrganizationCount()
});

这就像一个魅力，但与路由器v6，我只能使用<Outlet />来呈现孩子，如果我想传递数据给孩子，我使用它定义的 prop ，如<Outlet context={{ currentOrganization: currentOrganization }}和在组件中，如果想使用这一点，我只是使用useOutletContext，并获得通过<Outlet />传递的数据。如果一切都是一个功能组件，我就不需要在这里问这个问题，因为它非常简单。我想知道如何在不使用Outlet的情况下解决将props传递给具有类组件的子组件的问题（无论如何，它在类组件中不起作用）。我试着用上下文API来实现它，但是通过创建一个单独的组件来用context.provider Package <Outlet />，但是孩子们仍然没有得到AppContext中定义的任何属性。所以我的问题是，在使用router v6时，我如何将props传递给类组件。我已经将App.js组件更改为函数组件，因此我可以使用React Router v6。

redux

来源：https://stackoverflow.com/questions/77052829/how-to-pass-props-to-children-class-components-in-react-router-v6-without-using

1条答案

按热度按时间

wgx48brx1#

如果我理解正确的话，你的问题不是关于将props传递给路由组件，例如。<Route path="..." element={<SomeComponent thisIsAPassedProp={....} />} />，而是使用布局路由并通过Outlet向下传递上下文值，并且需要从基于React类的组件访问该值。
一个简单的解决方案是创建一个自定义的高阶组件，它可以 * 使用useOutletContext钩子并将值作为props传递。
范例：

import { useOutletContext } from 'react-router-dom';

export const withOutletContext = Component => props => {
  const contextValue = useOutletContext();

  return (
    <Component
      {...props}                  // <-- all other passed props
      contextValue={contextValue} // <-- the context value
    />
  );
};

修饰导出的React类组件，这些组件应该能够访问此上下文值。

import { Component } from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { withOutletContext } from '../path/to/withOutletContext';

class MyComponent extends Component {
  ...

  someFunction = () => {
    const { contextValue } = this.props;
    console.log(contextValue.currentOrganization);
    ...
  };

  ...
}

const mapStateToProps = state => ({
  ...
});

export default compose(
  connect(mapStateToProps),
  withOutletContext,
)(MyComponent);

现在，修饰的组件将能够访问它们最近的Outlet提供的上下文值。

<Routes>
  ...
  <Route element={<LayoutRoute />}> {/* Provides Outlet context value */}
    ...
    <Route path="..." element={<MyComponent />} /> {/* Receives Outlet context value as props */}
    ...
  </Route>
</Routes>

赞(0）回复(0）举报 2023-10-19

我来回答

redux 如何在react router v6中传递props到子类组件而不使用？

1条答案

相关问题

热门标签

最新问答