Question

我有一个看起来像这样的布局组件。

export interface LayoutProps {
    children?: React.ReactNode;
}

class Layout extends React.Component<LayoutProps, {}> {

}

export const routes  = <Layout>
    <Route exact path='/' component={Home} />
    <Route exact path='/test' component={test} />
</Layout>;

我想将Layout连接到redux但是我还没有能够做到这一点，我总是遇到类型错误，而且我在javascript上太新手了解如何使用typescript redux connect函数来做我想做的事。

我试过这个（在许多其他事情中）

export interface Props extends UserContext.State, LayoutProps { }

这就是dotnet核心反应redux模板使用connect的方式，我添加了ownProps部分。

export default connect(
    (state: ApplicationState) => state.userContext,
    UserContext.actionCreators,
    (ownProps: Props) => ownProps.children
)(Layout) as typeof Layout;

我在Layout组件上遇到的打字稿错误，我用它来注入路径。

严重级代码描述项目文件行抑制状态错误TS2322（TS）类型＆＃39; {children：Element []; }＆＃39;不能转让给 type＆＃39; IntrinsicAttributes＆amp; IntrinsicClassAttributes＆amp; Readonly＆lt; {children？：ReactNode; }＆GT; ＆安培;再...＆＃39 ;.输入＆＃39; {儿童：元件[]; }＆＃39;不能分配给＆＃39; Readonly＆＃39;。物业＆＃39;用户＆＃39;类型＆＃39; {children：Element []; }＆＃39 ;. xxxxxxxx.ClientPortal.Web.Public（tsconfig 项目）D：\ xxxxxxxx \ TFS Projects \ xxxxxxxx.Internal \ Source \ DEV \ xxxxxxxx.Internal \ xxxxxxxx.ClientPortal.Web.Public \ ClientApp \ routes.tsx 8 Active

Typescript redux对于初学者来说是如此复杂，简单的javascript redux要容易得多，有人可以帮助我解决方案使Layout成为连接组件，同时保持其生孩子的能力吗？

或者你可以直接向我提供关于打字稿redux的非常好的文档，它不会假设我已经知道了90％。

修改

以下作品，有点......

const mapStateToProps = (state: ApplicationState, ownProps: LayoutProps) => ({
    email: state.userContext.user.email,
    children: ownProps.children,
});

我必须制作道具＆＃39;任何＆＃39;这里因为我没有单一的类型，道具是多种类型的组合，不知道如何做到这一点......

class Layout extends React.Component<any, {}> {
}

export default connect(mapStateToProps)(Layout);

这不会抛出任何错误，除了现在路由被破坏，当我导航到这些路由时页面不会改变，当我自己编写URL时它会发生变化。

dotnet核心反应redux打字稿，如何连接拥有ownProps

0 个答案: