소품 및 TypeScript와 함께 스타일 컴포넌트

소품 및 TypeScript와 함께 스타일 컴포넌트

저는 TypeScript를 프로젝트에 통합하려고 하는데, 지금까지 스타일 컴포넌트 라이브러리에서 우연히 한 가지 문제가 발생했습니다.

이 컴포넌트를 고려하다

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; width: string; height: string;}을(를) 유형 IntelligentAttributes...에 할당할 수 없습니다.{source: any; width: string; height: string;} 유형에 속성 'onPress'가 없음

이게 뭔지, 어떻게 고쳐야 하는지 전혀 확신이 안 서는데, 어떻게 해서라도 이걸 신고해야 하나요?Icon뭐 이런 거라도?

편집: 타이프 스크립트v2.6.1, 스타일 컴포넌트v2.2.3

새로운 버전의 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};
`;

이 답변은 오래된 답변입니다.최신 답변은 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};
`;

그리고 당신은 가도 좋습니다.이 방법은 결코 이상적이지 않으며 조만간 TS에서 템플릿 리터럴에 제네릭스를 제공할 수 있는 방법이 제공되기를 희망합니다만, 현시점에서는 이것이 최선의 선택이라고 생각합니다.

크레딧은 크레딧이 있어야 할 경우에 부여됩니다.여기서 복사해서 붙여놨어요

스타일 컴포넌트 문서의 설명대로 가장 쉬운 방법은 다음과 같습니다.

import styled from 'styled-components';
import Header from './Header';

const NewHeader = styled(Header)<{ customColor: string }>`
  color: ${(props) => props.customColor};
`;
// Header will also receive props.customColor

스타일드 컴포넌트

    import styled from 'styled-components';

interface Props {
    height: number;
}

export const Wrapper = styled.div<Props>`
    padding: 5%;
    height: ${(props) => props.height}%;
`;

색인

import React, { FunctionComponent } from 'react';
import { Wrapper } from './Wrapper';

interface Props {
    className?: string;
    title: string;
    height: number;
}

export const MainBoardList: FunctionComponent<Props> = ({ className, title, height }) => (
    <Wrapper height={height} className={className}>
        {title}
    </Wrapper>
);
    

작동해야 한다

사용 예ColorCard컬러 소품 포함

import styled from 'styled-components';

export const ColorCard = styled.div<{ color: string }>`
  background-color: ${({ color }) => color};
`;

다음 항목만 지정하면 됩니다.interface:

import { createGlobalStyle, css } from 'styled-components';

interface PropsGlobalStyle {
  dark: boolean
}

export default createGlobalStyle`
  ${({ dark }: PropsGlobalStyled) => css`
    body {
      box-sizing: border-box;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: ${dark ? '#fff' : '#000'};
      background-color: ${dark ? '#000' : '#fff'};
    }
  `};
`;

@elnygren의 답변이 통했습니다.질문 하나만 할게요.다음 코드에 기본값을 할당하는 방법(@elnygren의 답변에서 복사). 예를 들어, "width" 및 "height"에 값을 전달하지 않으려면 기본값을 사용합니다.

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

저 스스로도 어려움을 겪고 있지만, 문제는 당신이 스타일링된 컴포넌트 안에서 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;

동작하는 것 같지만, 그 인터페이스를 복제하는 것은 싫습니다.다른 사람이 올바른 방법을 알려주거나 Image Props를 Propes에 삽입할 수 있기를 바랍니다.

언급URL : https://stackoverflow.com/questions/47077210/using-styled-components-with-props-and-typescript