传递道具

Question

背景

我正在使用 Typescript-React-styledComponents 执行我的第一步，

我正在尝试这个简单的例子，我通过父组件传递size道具，它将设置子组件的字体大小。

编辑：

错误：

ts 抛弃了我：

Property 'size' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ThemedOuterStyledProps<DetailedHTMLProps...'.

问题：

1. 我注意到size可能是一个有问题的道具名称，因为我没有在其他道具上得到任何错误。你知道为什么吗？

2. 更一般的问题 - 我错过了什么？

代码：

父组件

<Parent>
   <Child text="Red Bikini" color='red' size={2}/>
</Parent>

子组件

import * as React from 'react';
import styled from 'styled-components';

//EDITED
interface headerSizeType {
    1: string;
    2: string;
    3: string;
    4: string;
    5: string;
    6: string;
}

const size: headerSizeType = {
    1: '2em',
    2: '1.5em',
    3: '1.17em',
    4: '1em',
    5: '.83em',
    6: '.67em'
}

interface ChildProps {
    text: string;
    size?: number;
    color?: string;
    style?: any;

    children?: React.ReactChildren;
    className?: string;
}

const ChildStyle = styled.h2`
    display: inline-block;
    color: ${(props: any) => props.color || 'black'};
    font-size: ${props => size[props.size] || 'black'};  //1st Error here
`;

const Child= (props: ChildProps): JSX.Element => {
    console.log(props.color)
    return (
        <ChildStyle color={props.color} size={props.size}>  //2nd Error here
            { props.text }
        </ChildStyle>
    );
};


export default Title;

Answer 1

我找到了解决方案，虽然我没有掌握这个问题：）

但我暂时通过将样式组件转换为任何方式来修复它，如下所示：

const ChildStyle = styled.h2`
    display: inline-block;
    color: ${(props: any): string => props.color || 'black'};
    font-size: ${(props:any): any => headerSizes[props.size] || 'black'};
` as any;

我知道投出 任何 类型都不是好习惯，这就是为什么它是一个临时解决方案。

我听说样式组件中有一个主题对象，为您提供了更好，更干净的解决方案。

<强>编辑：

针对样式组件类型类型的另一种解决方案：

https://github.com/jacob-ebey/styled-components-ts

Answer 2

您应为样式化组件指定道具类型，如下所示：

type MyStyledProps = {
    color?: string;
    size?: string;
}

const ChildStyle = styled.h2<StyledComponent<'h2', any, MyStyledProps, never>>`
    display: inline-block;
    color: ${(props) => props.color || 'black'};
    font-size: ${props => size[props.size] || 'black'};
`;

然后您的错误就会消失。