Question

我在我的反应项目中使用了流式检查器。我有一个如下组件：

// @flow
import React, { type Node } from 'react';

type Props = {
  isLoading?: boolean,
  children: Node,
  modifier: '' | '--medium' | '--dark' | '--green',
}

const PulsingCircleLoader = ({ children, isLoading, modifier }: Props) => (
  isLoading ?
    <div class={`PulsingCircleLoader ${modifier}`}>
      <div class="double-bounce1" />
      <div class="double-bounce2" />
    </div>
    :
    <span>{children}</span>
);

PulsingCircleLoader.defaultProps = {
  isLoading: false,
  modifier: '',
};

我使用modifier道具来切换我的组件的样式。现在我想保护自己不接受blahblah作为修饰符，但我想接受：'' or '--medium' or '--dark' or '--green' 或它们的组合，如： --medium --green。我怎样才能做到这一点？

Answer 1

像这样使用UnionType：

type Modifier = '' | '--medium' | '--dark' | '--green';

并输入Props：

type Props = {
  isLoading?: boolean,
  children: Node,
  modifiers: Modifier[],
}

并使用它：

const PulsingCircleLoader = ({ children, isLoading, modifiers }: Props) => (
  isLoading ?
    <div class={`PulsingCircleLoader ${modifiers.join(' ')}`}>
      <div class="double-bounce1" />
      <div class="double-bounce2" />
    </div>
    :
    <span>{children}</span>
);

流 - 字符串的组合

1 个答案: