web-dev-qa-db-ja.com

スタイル付きコンポーネントの小道具にフローを使用する

だから私はJavaScriptの型システムで遊んでいて、ほとんどの場合はうまくいっていますが、スタイル付きコンポーネントに問題があります。スタイル付きコンポーネントの小道具にフローを適用する良い方法が見つからないようです。これまでのところ、私が見る唯一の解決策は次のとおりです。

export type ButtonPropTypes = ReactPropTypes & {
  styleType: 'safe' | 'info' | 'warning' | 'danger' | 'link',
  isPill: boolean,
  isThin: boolean,
};

export const ButtonStyled = styled.button`
  ${generateBaseStyles}
  ${hoverStyles}
  ${fillStyles}
  ${thinStyles}
  ${linkStyles}
`;

export const Button = (props: ButtonPropTypes) => <ButtonStyled {...props} />;

スタイル付きコンポーネントごとに2つのコンポーネントを作成する必要があるのはかなり過剰に思えます。

私は自分のグーグルスキルがただがらくたで何かが足りないことを望んでいますが、スタイル付きコンポーネントごとに複数のコンポーネント以外にこれを行うためのより良い方法はありますか？

javascriptreactjstypesflowtypestyled-components
12
ryanzec

James Kraus ' 回答に加えて、flow-typedを使用している場合（およびstyled-componentsのバージョンのパッケージをインストールしている場合）、基本的に次のことができます。

import styled, {type ReactComponentStyled} from 'styled-components'

type Props = {
 color?: string
}

const Button: ReactComponentStyled<Props> = styled.button`
  color: ${({color}) => color || 'hotpink'};
`
5
Brad Adams

はい！より良い方法があります。秘訣は、styled-componentsによって作成されたコンポーネントのタイプを宣言することです。これを行うには、 castingstyled.button`...`によって返される結果をReactコンポーネントのタイプに変換します。これにより、目的の小道具が取り込まれます。タイプを生成できます。 type mytype = React.ComponentType<MyProps>で任意の小道具を取り込むReactコンポーネントの。

// @flow
import styled from 'styled-components'
// Make sure you import with * to import the types too
import * as React from 'react'

// Mock function to use styleType
const makeStyles = ({styleType}) => ''

export type ButtonPropTypes = {
  styleType: 'safe' | 'info' | 'warning' | 'danger' | 'link',
  isPill: boolean,
  isThin: boolean,
};

export const ButtonStyled = (styled.button`
  ${makeStyles}
  ${({isPill}) => isPill ? 'display: block;' : ''}
  ${({isThin}) => isThin ? 'height: 10px;' : 'height: 100px;'}
`: React.ComponentType<ButtonPropTypes>) // Here's the cast

const CorrectUsage = <ButtonStyled styleType="safe" isPill isThin/>

const CausesError = <ButtonStyled styleType="oops" isPill isThin/> // error

const CausesError2 = <ButtonStyled styleType="safe" isPill="abc" isThin={123}/> // error

ローカル複製用にGitHubでコードをホストしました（Flowのサンドボックスは外部の依存関係では機能しないため）： https://github.com/jameskraus/flow-example-of-styled-components-props

5
James Kraus