web-dev-qa-db-ja.com

スタイル付きコンポーネントと小道具およびタイプスクリプトの使用

私はTypeScriptをプロジェクトに統合しようとしていますが、これまでに styled-components libraryに関する1つの問題に遭遇しました

このコンポーネントを検討してください

import * as React from "react";
import styled from "styled-components/native";
import { TouchableOpacity } from "react-native";

// -- types ----------------------------------------------------------------- //
export interface Props {
  onPress: any;
  src: any;
  width: string;
  height: string;
}

// -- styling --------------------------------------------------------------- //
const Icon = styled.Image`
  width: ${(p: Props) => p.width};
  height: ${(p: Props) => p.height};
`;

class TouchableIcon extends React.Component<Props> {
  // -- default props ------------------------------------------------------- //
  static defaultProps: Partial<Props> = {
    src: null,
    width: "20px",
    height: "20px"
  };

  // -- render -------------------------------------------------------------- //
  render() {
    const { onPress, src, width, height } = this.props;
    return (
      <TouchableOpacity onPress={onPress}>
        <Icon source={src} width={width} height={height} />
      </TouchableOpacity>
    );
  }
}

export default TouchableIcon;

次の行は3つのエラーをスローします。これらは本質的に同じです<Icon source={src} width={width} height={height} />

タイプ{source：any;幅：文字列; height：string;}はIntrinsicAttributes型には割り当てられません...型 'source：any;にプロパティ' onPress 'がありません幅：文字列;高さ：文字列;}

これが何であり、どのように修正するのか完全にはわかりませんが、これらをIconまたはこの種の何かで宣言する必要がありますか？

EDIT：TypeScript v2.6.1、styled-components v2.2.3

javascriptreactjstypescriptjsxstyled-components
10
Ilja

この答えは時代遅れで、最新の答えはここにあります： https://stackoverflow.com/a/52045733/1053772

私が知る限り、これを行う公式の方法は（まだ？）ありませんが、ちょっとした策略で解決できます。まず、withProps.ts次の内容のファイル：

import * as React from 'react'
import { ThemedStyledFunction } from 'styled-components'

const withProps = <U>() => <P, T, O>(fn: ThemedStyledFunction<P, T, O>) =>
    fn as ThemedStyledFunction<P & U, T, O & U>

export { withProps }

今、あなたの.tsxファイル、次のように使用します。

// ... your other imports
import { withProps } from './withProps'

export interface IconProps {
  onPress: any;
  src: any;
  width: string;
  height: string;
}

const Icon = withProps<IconProps>()(styled.Image)`
  width: ${(p: IconProps) => p.width};
  height: ${(p: IconProps) => p.height};
`;

そして、あなたは行ってもいいはずです。これは間違いなくnot理想であり、TSですぐにテンプレートリテラルにジェネリックを提供する方法があることを願っていますが、現時点ではこれが最良の選択肢だと思います。

クレジットが支払われるべき場所にクレジットが付与されます。これを here からコピーペーストしました

4
juandemarco

最近いくつかの開発が行われており、TypeScriptの新しいバージョン（3.0.1など）とスタイル付きコンポーネント（3.4.5など）を使用すると、個別のヘルパーは不要です。スタイル付きコンポーネントにプロップのインターフェース/タイプを直接指定できます。

interface Props {
  onPress: any;
  src: any;
  width: string;
  height: string;
}

const Icon = styled.Image<Props>`
  width: ${p => p.width};
  height: ${p => p.height};
`;

より正確にしたい場合は、onPressを無視します

const Icon = styled.Image<Pick<Props, 'src' | 'width' | 'height'>>`
  width: ${p => p.width};
  height: ${p => p.height};
`;
28
elnygren

私はこれを自分自身で苦労していますが、問題はスタイル化されたコンポーネント内でPropsインターフェースを使用していることだと思います。画像の小道具だけで別のインターフェイスを作成してみて、スタイル付きコンポーネントでそれを使用してください。

import * as React from "react";
import styled from "styled-components/native";
import { TouchableOpacity } from "react-native";

// -- types ----------------------------------------------------------------- //
export interface Props {
  onPress: any;
  src: any;
  width: string;
  height: string;
}


export interface ImageProps {
  src: string;
  width: string;
  height: string;
}

// -- styling --------------------------------------------------------------- //
const Icon = styled.Image`
  width: ${(p: ImageProps ) => p.width};
  height: ${(p: ImageProps ) => p.height};
`;

class TouchableIcon extends React.Component<Props> {
  // -- default props ------------------------------------------------------- //
  static defaultProps: Partial<Props> = {
    src: null,
    width: "20px",
    height: "20px"
  };

  // -- render -------------------------------------------------------------- //
  render() {
    const { onPress, src, width, height } = this.props;
    return (
      <TouchableOpacity onPress={onPress}>
        <Icon source={src} width={width} height={height} />
      </TouchableOpacity>
    );
  }
}

export default TouchableIcon;

動作しているように見えますが、これらのインターフェースを複製する必要はありません。誰か他の人が正しい方法を見せたり、ImagePropsをPropsに埋め込むことができればいいのですが。

1
thul