- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在尝试实现示例 Consuming Context with a HOC来自 TypeScript (2.8) 中的 React 文档 (React 16.3),但惨遭失败。作为引用,React 手册中的代码:
const ThemeContext = React.createContext('light');
// This function takes a component...
export function withTheme(Component) {
// ...and returns another component...
return function ThemedComponent(props) {
// ... and renders the wrapped component with the context theme!
// Notice that we pass through any additional props as well
return (
<ThemeContext.Consumer>
{theme => <Component {...props} theme={theme} />}
</ThemeContext.Consumer>
);
};
}
我能想到的最好的:
export interface ThemeAwareProps {
theme: string;
}
const ThemeContext = React.createContext('light');
export function withTheme<P extends ThemeAwareProps, S>(Component: new() => React.Component<P, S>) {
return function ThemedComponent(props: P) {
return (
<ThemeContext.Consumer>
{theme => <Component {...props} theme={theme} />}
</ThemeContext.Consumer>
);
};
}
class App extends React.Component {
public render() {
return (
<ThemeContext.Provider value={'dark'}>
<ThemedButton/>
</ThemeContext.Provider>
);
}
}
ThemedButton.tsx:
interface ThemedButtonProps extends ThemeAwareProps {
}
interface ThemedButtonState{
}
class ThemedButton extends React.Component<ThemedButtonProps, ThemedButtonState> {
constructor(props: ThemedButtonProps) {
super(props);
}
public render() {
return (
<button className={this.props.theme}/>
)
}
}
export default withTheme(ThemedButton);
问题出在最后一行 ( export default withTheme(ThemedButton)
)。 TypeScript 编译器提示说
Argument of type
typeof ThemedButton
is not assignable to parameter of typenew () => Component<ThemedButtonProps, ThemedButtonState, any>
.
我错过了什么?
最佳答案
你大部分都做对了,只是少了一些:
Component
, 使用 React.ComponentType<Props>
,它正确地接受类组件和功能组件。我想使用 new () => ...
单独在这里不起作用,因为签名不完全匹配。
从 ThemedButton
中排除 Prop 在使用它时,您必须使用一些看起来很神奇的语法:
function ThemedComponent(props: Pick<P, Exclude<keyof P, keyof ThemeAwareProps>>)
这是它的作用:
Exclude<keyof P, keyof ThemeAwareProps>
表示“获取 P
的 key ,然后拿走 ThemeAwareProps
中的 key ”Pick<P, ...>
然后说,“从 P
返回一个只有这些属性的对象类型”结合这些给我们一个组件,它接受 ThemedButton
的所有 Prop 确实,减去 theme
Prop ,这样我们就可以做<ThemedButton />
没有错误。
这是完整的 HOC:
function withTheme<P extends ThemeAwareProps>(Component: React.ComponentType<P>) {
return function ThemedComponent(props: Pick<P, Exclude<keyof P, keyof ThemeAwareProps>>) {
return (
<ThemeContext.Consumer>
{(theme) => <Component {...props} theme={theme} />}
</ThemeContext.Consumer>
)
}
}
And finally, a good blog post on the subject, from which I gleamed most of this information from.它还包括一种缩短 Pick<...>
的方法带有 Omit
的东西如果您愿意,请键入。
编辑:The behavior of rest/spread has changed in 3.2 , 和 this bug came up as an unfortunate side effect ,导致 props
的类型与其他 Prop 合并时被删除。 A currently working workaround is to cast props
as P
:
return (
<ThemeContext.Consumer>
{(theme) => <Component {...props as P} theme={theme} />}
</ThemeContext.Consumer>
)
关于reactjs - react / typescript : Consuming context via HOC,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50612299/
我有一个高阶组件,它使用 React Router 提供的 location.search Prop 来构造一个 queryParams 对象,并将其作为 Prop 传递给它的包装组件。 functi
当我从 tsx 文件导入 HOC 时,一切正常。但是当我将扩展名更改为 js 时,我看到一个 Jest 错误: Jest encountered an unexpected token. This u
我最近正在努力解决复杂的 HOC 问题,以及如何仅传递其中定义的新 Prop 而不是任何其他 Prop 。更准确地说,假设我的 HOC 使用其他 HOC 来扩展其属性,例如 const withSes
我的基本理解是 HOC 之类的连接(用于连接 redux 存储)和其他 HOC 在导出组件时应用于组件。 像这样 import React, { Component } from 'react'; i
我在创建简单的 HOC 时遇到问题,当没有查询参数时应该重定向到 404。否则,它应该只返回一个组件。 import React, { useState, useEffect } from 'reac
我有这个简单的高阶组件,它工作正常但它只接受一个组件: let VerticalSlider = (Komponent) => { return (props) => (
我想使用高阶组件向我的组件包装器添加样式。 Typescript 说 ComponentWithAdddedColors 有错误。 type Props = { bg?: string; }; f
在 Ansible 文档中,它的表述如下:- 也可以使用 --become-user 成为 root 以外的用户:$ ansible atlanta -a "/usr/bin/foo"-u 用户名 -
我正在研究无线 ad-hoc 网络中的邻居发现协议(protocol)。有许多协议(protocol)在发现阶段进行时仅依赖节点之间的信标消息。另一方面,还有其他方法试图在发现过程中传输更多信息(如节
这是我的父组件(Grid),(这里我传递了更多 hoc 使用的 Prop ,但我在这里省略了它们): 这是表组件: export const QuickBooksTable = withIntegr
背景故事:我在一家开发和制造商业产品的公司工作,该产品在一个农场中可以拥有多达 100 多台专用 PC。 我们每年仅获得少数新客户。 我们开发了一款 iPod/iPhone 应用程序,可让我们向农场发
我刚刚开始在 React 中使用 HOC,让我有点困惑的一件事是,这个示例中的内部函数如何访问props 作为参数? const withProps = Component => ( props
我尝试使用 HOC 模式而不是面向对象以避免冗余代码。 情况很简单,解释如下: 在主页中我有这样的内容: const WrappedComponent = Wrapper(Wrapped); 在包装
问题 让我们假设我有一个 SFC(我正在使用 TypeScript)并将其导出,如下所示: export const AppShell: React.SFC = (props: Props) => (
我正在构建这个 HOC Modal。 当我按下模态上的“Aplicar”按钮(TouchableItem:onPress)时,我需要访问 WrappedComponent 状态。 有什么办法可以做到这
我需要向所有我的React函数组件中添加添加[data-test-id]属性以进行测试的可能性。为了实现这一点,我创建了 withTestId() HOC,它将可选的 prop testId 添加到包
我刚刚开始在 React 中使用 HOC,让我有点困惑的一件事是,这个示例中的内部函数如何访问props 作为参数? const withProps = Component => ( props
我是 .net 背景的新手,这里的问题是 HOC 与 OOPS 概念中的继承有何不同,它具有具有基属性的父类和扩展 Base 并使用 Base 类中的状态、属性和基方法的子类。 React组件中实现P
我正在尝试创建一个 HOC,使常规功能组件“可触摸”。 所以我有一个像这样的 HOC: const Touchable = (Component, handler) => { const T =
我刚刚检查了 React 中的 HOC。他们很酷。但是,简单地包装一个组件不就可以达到相同的结果吗? 高阶组件 这个简单的 HOC 将状态作为属性传递给 CompositComponent const
我是一名优秀的程序员,十分优秀!