问如何使用条件属性为How添加流量类型
EN

Stack Overflow用户

提问于 2018-12-20 17:47:04

回答 1查看 270关注 0票数 1

我正在尝试定义一个在满足特定条件的情况下添加道具的HOC，但我不知道如何让它工作。

下面是一个简单的…示例

// @flow

import * as React from 'react'

type EnhancedProps = {| addFoo?: boolean |}
type BaseProps = {| foo?: string |}
type HOC =
  | (Component: React.ComponentType<{| foo: string |}>) => React.ComponentType<EnhancedProps & {addFoo: true}>
  | (Component: React.ComponentType<$Diff<BaseProps, { foo: string }>>) => React.ComponentType<EnhancedProps & {addFoo: false}>

const hoc: HOC = (Component) =>
  ({addFoo, ...props}) => {
    if (addFoo) {
      props = {...props, foo: 'Hi'}
    }
    (props: {...EnhancedProps, foo: string})
    return <Component {...props}/>;
  }


const BaseComponent = ({foo}: BaseProps) => `Hello`;

const Enhanced: React.ComponentType<EnhancedProps> = hoc(BaseComponent);

<Enhanced />;
<Enhanced addFoo/>;

您可以在此处的…流“尝试”页面上查看错误https://flow.org/try/#0PTAEAEDMBsHsHcBQiCWBbADrATgF1AFSgCGAzqAEoCmxAxvpNrGqAOTY32vK4CeGVUAFEAdgAtiI2lQAmABSYZyAXlABvAD4kZMgGKxYAfgBcoAEYHoNEaA0BfRHwGgAQmSoLYS0Ks2hIBiagpLjYKCIA5rYOToIAEgDyAMI+oIigtqAAFEnMWCJUIrim1HS4AHS5mLAFRQAq-FQAPH4BsKYhYZHRAHwAlD49lJwVVfmFuA0CTaISUrKe3gBk6sQ6+u2goQCuVHY96Zk5eTUTJSOVJ7WTjU0AJAAiKJCQTW6kHoqkADTq-gYdULhKL7fqDYZlS7Va5TZqzSTSeRfUArNRrPQA-zEaAffbIWg1EKgMSwWimRIpVTHaETAbKIaHDJM7Jo9YGX7lTkYL52OlDNSM5lM57ZdEbAYCgCQQqF3K8KnUnPKcqUvzaplYcRQrAcMuZur1GSyKtIpjUSvh8yR8rVmM6wN5gplHFw22wNiaY1ORUVXJ5wB6AG4nUyDTKQxlEASRET3lQvddUlk1G07KY44tSHzQAADOJUaBwHPBw1Rwn4S2I86QhMTWEzcQIhZfIaqEm0LJx2tFPolvWIBtzRGgAPBwdNmTaDGwUdAA

或者这里是实际的错误…

12:         ({addFoo, ...props}) => {            ^ Could not decide which case to select. Since case 1 [1] may work but if it doesn't case 2 [2] looks promising too. To fix add a type annotation to destructuring [3] or to return [4].
References:
8:   | (Component: React.ComponentType<{| foo: string |}>) => React.ComponentType<EnhancedProps & {addFoo: true}>                                                              ^ [1]
9:   | (Component: React.ComponentType<$Diff<BaseProps, { foo: string }>>) => React.ComponentType<EnhancedProps & {addFoo: false}>       ^ [2]
12:         ({addFoo, ...props}) => {
             ^ [3]
12:         ({addFoo, ...props}) => {
                                   ^ [4]
23: const Enhanced: React.ComponentType<EnhancedProps> = hoc(BaseComponent);
                                        ^ boolean [1] is incompatible with boolean literal `true` [2] in property `addFoo`.
References:
5: type EnhancedProps = {| addFoo?: boolean |}
                                    ^ [1]
8:   | (Component: React.ComponentType<{| foo: string |}>) => React.ComponentType<EnhancedProps & {addFoo: true}>
                                                                                                           ^ [2]
23: const Enhanced: React.ComponentType<EnhancedProps> = hoc(BaseComponent);
                                        ^ undefined [1] is incompatible with boolean literal `true` [2] in property `addFoo`.
References:
5: type EnhancedProps = {| addFoo?: boolean |}
                                    ^ [1]
8:   | (Component: React.ComponentType<{| foo: string |}>) => React.ComponentType<EnhancedProps & {addFoo: true}>
                                                                                                           ^ [2]
23: const Enhanced: React.ComponentType<EnhancedProps> = hoc(BaseComponent);
                                                         ^ Cannot assign `hoc(...)` to `Enhanced` because `React.ComponentType` [1] is not an object.
References:
9:   | (Component: React.ComponentType<$Diff<BaseProps, { foo: string }>>) => React.ComponentType<EnhancedProps & {addFoo: false}>
                   ^ [1]
23: const Enhanced: React.ComponentType<EnhancedProps> = hoc(BaseComponent);
                                                         ^ all branches are incompatible: Either inexact `React.ComponentType` [1] is incompatible with exact `React.Element` [2]. Or `React.ComponentType` [1] is incompatible with `React.Portal` [3]. Or property `@@iterator` is missing in `React.ComponentType` [1] but exists in `$Iterable` [4].
References:
9:   | (Component: React.ComponentType<$Diff<BaseProps, { foo: string }>>) => React.ComponentType<EnhancedProps & {addFoo: false}>                                                                              ^ [1]
[LIB] ..//static/v0.89.0/flowlib/react.js:18:   | React$Element<any>                                                  ^ [2]
[LIB] ..//static/v0.89.0/flowlib/react.js:19:   | React$Portal                                                  ^ [3]
[LIB] ..//static/v0.89.0/flowlib/react.js:20:   | Iterable<?React$Node>;
                                                  ^ [4]

flowtype

回答 1

Stack Overflow用户

发布于 2018-12-22 18:15:48

我想你错过的是：

精确对象类型的

交点可能不会像预期的那样工作。如果需要组合精确的对象类型，请使用对象类型扩散。

doc

此外，最好对hoc使用generics，因为封装的组件属性可能是每个组件特定的。

import * as React from 'react'

type EnhancedProps = {| addFoo?: boolean |}
type BaseProps = {| foo?: string |}

const hoc = <T>(Component: React.ComponentType<T>): React.ComponentType<{...EnhancedProps, ...T}> => 
        ({addFoo, ...props}) => {
          if (addFoo) {
              props = {...props, foo: 'Hi'}
          }
          (props: {...T, ...EnhancedProps})
          return <Component {...props}/>;
        }


const BaseComponent = ({foo}: BaseProps) => `Hello`;

const Enhanced: React.ComponentType<{...BaseProps, ...EnhancedProps}> = hoc<BaseProps>(BaseComponent);

<Enhanced />;
<Enhanced addFoo/>;

Try

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53866059

复制

相似问题

问如何使用条件属性为How添加流量类型
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用条件属性为How添加流量类型EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用条件属性为How添加流量类型
EN