Динамические типы потока в компоненте React

Question

Пожалуйста, помогите мне решить дело, описанное ниже. У меня есть компонент React (называемый Test), который использует свойства, которые отличаются только в одном поле (это поле не влияет на то, что делает компонент). Но поток жалуется на это свойство, когда я использую этот компонент, и я не знаю, как правильно его разрешить. Помогите мне, пожалуйста, если у вас есть опыт разрешения подобных случаев. Заранее спасибо!

import React, {Component} from 'react';

const Obj1 = {a: 'a', b: 'b'};
const Obj2 = {c: 'c', d: 'd'};

type TypesForA = $Values<typeof Obj1>;
type TypesForB = $Values<typeof Obj2>;

type A = Array<{|
  a: number,
  b: TypesForA,
|}>

type B = Array<{|
  a: number,
  b: TypesForB,
|}>

type Props = {prop: A | B};
type State = {prop: A | B};

export class Test extends Component<Props, State> {
   state = {prop: this.props.prop}
   render() {return null}

}

class Wrapper1 extends Component {     
   render() {
       return <Test prop={[{a: 1, b: Obj1}]}/> 
   }       
}


class Wrapper2 extends Component {     
   render() {
       return <Test prop={[{a: 1, b: Obj2}]}/> 
   }       
}

Ошибки потока:

Answer 1

Вот рабочий пример , но он может делать не все, что вы хотите. Основная проблема заключается в том, что Flow не может определить тип элементов в массиве prop, но работает явный ввод значения, например,

class Wrapper1 extends Component<*> {     
   render() {
     const prop : A = [{a: 1, b: Obj1}];
     return <Test prop={prop}/> 
   }       
}