如何利用流式细胞

我试图写一个特殊的流型，将返回一个组件，并添加道具ISVISIBLE它如何利用流式细胞

type VisibleProps = {isVisible: boolean} 

const VisibleComp = <P, S>(Component: Class<React.Component<void, P, S>>) 
    : Class<React.Component<void, P&VisibleProps, S> => 
    class WrappedComponent extends React.Component<void, P&VisibleProps, S> { 
     render() { 
      return <Component {...this.props} isVisible={true} /> 
     } 
    }

我尝试几件事情没有成功写一个特殊的类型定义:(

来源

2017-03-31 lionelB

掘流动的问题，我发现这个问题，它解决了我的问题 https://github.com/facebook/flow/issues/3241

希望它能帮助。

// @flow 
import React from 'react'; 

type Visible = {isVisible: boolean} 
type WrappedProps<P,Visible> = P & Visible 

const injectVisible = <P: Object>(
    Component: Class<React.Component<*, WrappedProps<P, Visible>, *>> 
) => class VisibleHoC extends React.Component<*, P, Visible> { 
     state: Visible 
     render() { 
      return <Component {...this.props} isVisible={true} /> 
     } 
    } 

class Component extends React.Component { 
    props: Visible 
    render() { 
    return <div> {this.props.isVisible ? 'visible' : 'hidden'}</div> 
    } 
} 

const VisibleComponent = injectVisible(Component)

来源

2017-03-31 13:39:51 lionelB

在我看来，你实际上并没有检查'injectVisible'是否正确地将所需的'isVisible' prop添加到包装的Component中。如果删除'isVisible = {true}'，它不会抛出任何流错误，即使'VisibleComponent'毕竟还没有收到'isVisible'这个道具。我正试图理解如何正确流动HOC的类型，所以我会好奇地了解更多关于您的方法以及我是否误解了某些东西。 – maxedison

仅供参考，我有我自己的有点相关的问题在这里：http://stackoverflow.com/questions/43267391/flow-error-when-passing-props-through-flow-typed-higher-ordered-components – maxedison

你是对的它只能检查传递给HoC的组件。我的第一个解决方案意味着使用$ Diff 键入Hoc组件，但不工作（可能与$ Diff错误有关） – lionelB

如何利用流式细胞

回答

相关问题