Использование универсальных типов потока в компоненте React Props и создание универсального компонента> - PullRequest
Новая
       10

Использование универсальных типов потока в компоненте React Props и создание универсального компонента>

0 голосов
/ 12 июня 2018

У меня есть проблема с родовыми потоками Flow против React Components, на которую я не смог найти ответа, в Google.

Я хочу создать общий компонент с подпорками, который принимает общие аргументы, исоздать экземпляр этого в методе render ().Пока что не повезло - мой минимальный пример кода здесь:

Попробуйте 

import React from 'react'


// Different commands for different contexts
type PaymentCommands = 'pay' | 'reject' | 'unused'
type CartCommands = 'checkout' | 'empty'


type Command<CommandType> = {
  userId: string,
  command: CommandType,
}

// Props let the component take different types of commands
type Props<CommandType> = {
  commands: Command<CommandType>[]
}


// The CommandButtons component should be used for sending various commands depending on context.
class CommandButtons<CommandType> extends React.Component<Props<CommandType>> {
  render() {
    return (
      <div>
        BLABLA
      </div>
    )
  }
}

// But no luck in instantiating a specific type of the CommandButtons generic, so far
const PaymentCommandButtons = () =>  {return CommandButtons<PaymentCommands>}

type PaymentContainerProps = { userId: string }
class PaymentContainer extends React.Component<PaymentContainerProps> {
  render() {
//      return (
//          <div><CommandButtons<PaymentCommands> commands={[{userId: 1, commmand: 'pay'}, {userId:2, command: 'reject'}]} /></div>
//        )
    return (
       <div><PaymentCommandButtons commands={ [{userId: 1, commmand: 'pay'}, {userId:2, command: 'reject'}] } /></div>
    )
  }
}

1 Ответ

0 голосов
/ 05 июля 2018

Я решил это так! 

const PaymentCommandButtons = (props: Props<PaymentCommands>) => <CommandButtons { ...props } />
...