React Redty Flowtype «свойство не найдено» в элементе React, которое получает свойства от соединения redux.

Question

У меня есть компонент React, который использует функцию refractx connect (декоратор) для установки свойств. При упоминании этого компонента в JSX, flowtype жалуется «свойство не найдено в ... реквизита Реагировать элемент»

type SidebarCmpProps = { 
    activeSidebarComponent: string, 
    actions: { openCallMember:() => void } 
} 

@connect(
    (state) => { 
    return { activeSidebarComponent: state.sidebar.activeSidebarComponent } 
    }, 
    (dispatch) => ({ actions: bindActionCreators({ openCallMember }, dispatch) }) 
) 
class Sidebar extends React.Component { 
    props: SidebarCmpProps 
    static propTypes = { 
    actions: React.PropTypes.object.isRequired, 
    activeSidebarComponent: React.PropTypes.string 
    } 
} 

Точная ошибка:

 
65:   
      ^^^^^^^^^^^ React element `Sidebar` 
56: props: SidebarCmpProps 
       ^^^^^^^^^^^^^^^ property `actions`. Property not found in... 
65:   
      ^^^^^^^^^^^ props of React element `Sidebar` 

Чтобы обойти эту ошибку, я имел для изменения свойств типов союза any и добавить defaultProps, что меньше, чем идеальный

type SidebarCmpProps = { 
    activeSidebarComponent: any | string, 
    actions: any | { openCallMember:() => void } 
} 
class Sidebar extends React.Component { 
    static defaultProps: SidebarCmpProps = { 
    actions: null, 
    activeSidebarComponent: null 
    } 
} 

Есть ли лучшее решение?

Answer 1

Если вы хотите, чтобы оба компонента реквизита по желанию, вы должны определить их так:

type SidebarCmpProps = { 
    activeSidebarComponent?: string, 
    actions?: { openCallMember:() => void } 
} 

Кроме того, я не уверен, что это хорошая идея, чтобы обеспечить как РЕАКТ propTypes и flowtype , Это дублирование логики, не так ли?

Answer 2

Ну, вы получаете ошибку property 'actions'. Property not found in, потому что вы только что установили activeSidebarComponent опору в @connect, и действия объявлены как необходимые опоры actions: React.PropTypes.object.isRequired.

Итак, вы должны установить значение по умолчанию для actions или удалить это ограничение.