使用带有 props 和 TypeScript 的样式组件

问题描述 投票：0回答：9

我正在尝试将 TypeScript 集成到我们的项目中，到目前为止，我偶然发现了 styled-components 库的一个问题。

考虑这个组件

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} />

输入{来源：任意；宽度：字符串； height: string;} 不可分配 输入 IntrinsicAttributes ...类型中缺少属性“onPress” {来源：任意；宽度：字符串；高度：字符串；}

不完全确定这是什么以及如何修复它，我是否需要在 

Icon
或类似的东西上声明这些？

编辑：打字稿

v2.6.1
，样式组件
v2.2.3

javascript reactjs typescript jsx styled-components
9个回答
201
投票

最近有了一些进展，随着新版本的 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};
`;
19
投票

这个答案已过时，最新的答案在这里：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 中为模板文字提供泛型，但我想目前这是你最好的选择。

在应得的信用处给予信用：我从这里

复制粘贴了此内容
19
投票

样式组件docs所说的最简单的方法：

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
13
投票

样式组件

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

应该可以工作

6
投票

使用 

ColorCard
和颜色属性的示例

import styled from 'styled-components';

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

您只需指定一个

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'};
    }
  `};
`;
3
投票

@elnygren 的答案对我有用。我只想问一个问题。如何为以下代码分配默认值（从@elnygren的答案复制）。例如如果我不想将任何值传递给“宽度”和“高度”，则将使用默认值。

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

我自己正在努力解决这个问题，但我认为问题是您在样式组件内使用 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 中？

0
投票

文档状态：

如果你想阻止样式组件使用的 props 被传递到底层 React 节点或渲染到 DOM 元素，你可以在 prop 名称前加上美元符号 ($) 前缀，将其变成瞬态 prop。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.