>source

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 가지 오류가 발생합니다.< 아이콘 소스= {src} width= {width} height= {height} /gt;

유형 {소스 : any; 너비 : 문자열; Height : String;}은 할당되지 않습니다 INTRINSICATTRIBUTES를 입력하는 것 ... 속성 'onPress'유형이 없습니다. {출처 : any; 너비 : 문자열; 높이 : 문자열;}

이런 일이 무엇인지, 어떻게 해결하는지, 어떻게 든 이것을 선언해야합니까?또는 이런 종류의 무언가?

편집 : typescript v2.6.1, 스타일 -구성 요소 v2.2.3

  • 답변 # 1

    이 답변은 오래되었고, 최신 대답은 여기에 있습니다 : https://stackoverflow.com/a/52045733/1053772.

    내가 할 수있는 한, 이것을 할 수있는 한 공식적인 방식 (아직?)이 일을 할 수는 있지만, 당신은 약간의 속임수로 그것을 해결할 수 있습니다. 첫째, A를 만듭니다withprops.s.다음 내용이있는 파일 :

    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 &amp;
     U, T, O &amp;
     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};
    `;
    

    그리고 당신은 잘 어울려야합니다. 확실히 이 아닙니다.

    크레딧이 마감 된 경우에 대한 신용이 주어집니다. 나는 이것을 copypasted 여기

    이것은 훌륭한 해결책이었습니다. 그러나 @ elnygren의 의견은 분명히 가장 우아한 현재의 솔루션입니다.

    Martin2021-04-04 14:14:02
  • 답변 # 2

    스타일링 된 구성 요소

      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>);
    

    가야합니다

  • 답변 # 3

    A.를 지정해야합니다상호 작용:

    import { createGlobalStyle } from 'styled-components';
    interface PropsGlobalStyle {
      dark: boolean
    }
    export default createGlobalStyle`
      body {
        box-sizing: border-box;
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        color: ${(props:PropsGlobalStyled)=> (props.dark ? '#FFF' : '#000')};
    background-color: ${(props:PropsGlobalStyled)=> (props.dark ? '#000' : '#FFF')};
      }
    `;
    

  • 답변 # 4

    최근의 개발이 있으며 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};
    `;
    

    산뜻한! 테마와 잘 작동합니다. 이것은 선택된 답변이어야합니다. 단지 내 구문 강조 표시가 중단되어 있습니까?

    Brendan McGill2021-04-04 13:30:50

    그것이 스타일을해서는 안됩니다. 이미지 ?

    David Casanellas2021-04-04 13:30:50

    @manurauck 나는 동의하지 않는다. 유형 {소스 : any; 너비 : 문자열; 높이 : 문자열;} intrinsicattributes 유형에 할당 할 수 없습니다. {소스 : any; 너비 : 문자열; 높이 : 문자열;} onpress가 명확하게 누락되어 있으므로 in onpress는 이미지의 소품입니다

    David Casanellas2021-04-04 16:52:26

    Typescript를 매개 변수로 수락하는 솔루션을 추천 할 수 있습니까?

    Jurijs Kovzels2021-04-04 18:47:38
  • 답변 # 5

    나는이 스스로를 통해 고심하고 있지만, 나는 당신이 스타일이 적용된 구성 요소 안에있는 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;
    

    가 작동하는 것 같지만 해당 인터페이스를 복제해야합니다. 희망적으로 누군가 다른 누군가가 올바른 방법을 보여줄 수 있거나 이미지를 소품에 삽입 할 수 있습니까?

    이것은 나를 위해 작동하지 않았지만 TMP는 Const 아이콘입니다. any= styled.image 나는 왜 작동하는지 모르겠지만,

    Ilja2021-04-04 06:04:26

    당신이 일하러가는 것을 기쁘게 생각합니다. 나는 반응 돔에 있으므로 몇 가지 차이가있을 수 있습니다.

    thul2021-04-04 06:04:26

    그것이 필요한 것입니다 : 너비 : $ {(p : imageprops)=>p.width};

    Andrii Kovalchuk2021-04-04 09:26:02
  • 이전 javascript : TextArea Limit Enter Enter 눌러 &새 줄에서 공백을 자르십시오.
  • 다음 python : 나는 내 봇으로 오디오를 재생하려고 노력하고 있지만 오류를 계속받는 것 : 모듈 'Disord'는 'ffmpegpcmaudio'속성이 없습니다.