- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我目前正在尝试将重组纳入我的 React 代码库。因此,我试图让一些基本的东西工作,并且我让它工作了,但我不太确定,如果这是重构的正确工作方式。
所以我有以下代码:
interface Value {
value: string
}
interface Loading {
loading: boolean
}
const TestComponent = (props: Value) => <div>Value: {props.value}</div>
const LoadingComponent = () => <div>Loading ...</div>
所以我有一个 TestComponent,它应该显示 props 中提供的值,另外我还有一个 LoadingComponent,它应该在设置加载 props 时显示。
所以我使用了 branch
重组功能
const withLoading = branch<Loading>(
({loading}) => loading,
renderComponent(LoadingComponent)
)
现在当我使用 withLoading
在任何没有 Prop 的组件上,我可以在它们上面设置加载 Prop 。
const EnhancedCompWithLoading = withLoading(SomeCompWithoutProps)
render() {
return <EnhancedCompWithLoading loading={this.state.loading} />
}
这对我来说很好,真正的问题是在尝试将它与带有 Prop 的组件一起使用时开始。当我这样尝试时:
const TestWithLoading = withLoading(TestComponent)
render() {
return <TestWithLoading value="testVal" loading={this.state.loading} />
}
我收到错误消息 TS2339: Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Loading, any, any>>
& Readonly<{ children?: ReactNode; }> & Readonly<Loading>'.
所以我查看了@types/recompose 中的类型定义。 branch<TOutter>
返回 ComponentEnhancer<any,TOutter>
.据我了解,我希望能够提供 any
组件,以及 <TOutter>
通用是这样的,结果组件知道测试功能所需的 Prop 。这也可以在没有额外 Prop 的情况下工作。
但是 ComponentEnhancer 的 TypeDefinition 看起来像这样(重构 0.30.2):
interface ComponentEnhancer<TInner, TOutter> {
(component: Component<TInner>): ComponentClass<TOutter>
}
因此,ComponentEnhancer<any, Loading>
我从之前的branch
收到的函数将返回 ComponentClass<Loading>
.然而 <TInner>
我提供给 ComponentEnhancer 的组件将被丢弃,我无法使用我的 Value
增强组件中的 Prop 。
所以我的问题是,我是不是做错了,有没有更好的方法来实现这一点(通过重组)。或者它只是 TypeDeclaration 中的一个 Bug,因为更改了 ComponentEnhancer
的返回值至 ComponentClass<TOutter & TInner>
为我解决了整个问题。对此有什么想法吗?
最佳答案
我不熟悉 branch
和 recompose
但如果这只是一个打字问题,我们可以解决它。
问题是 branch
的类型不是很好。如果目的是将包装组件的属性转发到 HOC 并将显式输入到 branch
的 props 添加到 HOC,那么更好的结果类型将是:
type BetterComponentEnhancer<TOutter> = {
<TInner>(component: React.ComponentType<TInner>): React.ComponentClass<TInner & TOutter>
}
对于这种类型,这将起作用:
const withLoading = branch<Loading>(
({ loading }) => loading,
renderComponent(LoadingComponent)
)as unknown as BetterComponentEnhancer<Loading>
type BetterComponentEnhancer<TOutter> = {
<TInner>(component: React.ComponentType<TInner>): React.ComponentClass<TInner & TOutter>
}
const TestWithLoading = withLoading(TestComponent)
function render() {
return <TestWithLoading value="testVal" loading={true} />
}
关于javascript - 使用 recompose 和 typescript 正确输入 HigherOrderComponents,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54025204/
我想用 recompose.pure 和其他 hoc 组合(重构)一个 React 组件。 我应该按什么顺序执行此操作? compose(pure, anOtherHoc)(MyComp); comp
我有以下完全可以工作的代码,尽管其中一部分 (_FetchJSON) 是重构之外的自定义 HOC (现场演示@ https://codepen.io/dakom/pen/zdpPWV?editors=
我有一个 React 应用程序,它也使用 Recompose和Redux . 它们都有一个内容非常相似的 compose 函数: Compose from Redux Compose from Rec
我最近开始将 React 与 TypeScript 结合起来。我在使用 Recompose 生命周期方法时遇到问题。在 componentDidMount 中,我收到错误消息“类型‘{}’上不存在属性
我正在查看@acdlite 编写的重组库中的compose 函数来为高阶组件组合边界条件,这就是 compose 函数的样子 const compose = (...funcs) => funcs.r
我喜欢 recompose,但是当我使用它时,我最终得到的堆栈跟踪有如下几行: in withProps(withHandlers(withHandlers(SelectionOverlay))) (
我有一个功能组件,需要渲染 height 和 width Prop 。我们称它为 PureSizableDiv: const PureSizableDiv = ({ height, width })
我在测试一个 prop 在我的 HOC 上被触发时遇到了一些麻烦。 import { connect } from 'react-redux'; import { compose, lifecycle
提前为模糊的标题道歉,很难解决我的问题。 我正在尝试同时使用 React、Recompose 和 Typescript,但是在尝试将 props 传递到我的组件时出现以下错误: [ts] Proper
我在我的 React 项目中使用 recompose https://github.com/acdlite/recompose/ 这是一个很棒的图书馆。我使用 compose 实用程序作为容器组件,将
我正在使用 create-react-app 和 typescript 脚本作为基础,试图获得一个使用 recompose 的简单示例。 问题是我无法将属性直接发送到组件。 我创建了一个简单的用户组件
我开始注意到我的应用程序出现了一些卡顿,我相信原因是可组合项在不应该被重新组合时被重新组合。 我检测到一些触发不必要的重新组合的用户交互,但我无法将手指放在导致重新组合的原因上。我在修改状态的每个地方
获得工作应用程序:https://github.com/BeerDRinker/recompose-ref 以下代码(/src/App.js 中的注释部分)按预期工作: class App exten
我正在编写这个产品列表组件,但我正在与状态作斗争。列表中的每个产品本身就是一个组件。一切都按预期渲染,除了当 prop 更改时组件不会更新。我正在使用 recompose 的 withPropsOnC
我查看的所有示例中,withHandlers 中实际调用的函数似乎是从 props 调用的函数,但我不知道该函数是如何定义的。这是 docs for humans 中的一个小例子. compose(
我正在尝试向 React Native 中的功能组件添加引用,以便在 FlatList 组件上使用scrollToEnd。 我想为此使用 recompose,正如他们的文档所述, toClass()
如何编写可以设置 this.state.status 的组件特定常量 STATUS?我认为问题在于 this 上下文。如果 this.STATUS 被硬编码在字符串中,它就可以工作。 import {
最近开始使用重构 ( https://github.com/acdlite/recompose ) 我想知道我应该如何处理用一些 hocs recompose 提供的单元测试组件?我喜欢用函数式方法替
我目前正在尝试将重组纳入我的 React 代码库。因此,我试图让一些基本的东西工作,并且我让它工作了,但我不太确定,如果这是重构的正确工作方式。 所以我有以下代码: interface Value {
为什么所有 Recompose 配方都以 const { Component } = React; 开头,而它们不使用 Component,或者确实如此? 这样开始食谱有什么意义? https://g
我是一名优秀的程序员,十分优秀!