gpt4 book ai didi

reactjs - 带有样式组件的 TypeScript

转载 作者:搜寻专家 更新时间:2023-10-30 20:59:35 25 4
gpt4 key购买 nike

这里是 TypeScript 新手。我有一个使用 styled-components 的组件,我想将其转换为 TypeScript

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'


const propTypes = {
name: PropTypes.string.isRequired // https://material.io/tools/icons/?style=baseline
}

const Icon = styled(({name, className, ...props}) => <i className={`material-icons ${className}`} {...props}>{name}</i>)`
font-size: ${props => props.theme.sizeLarger};
`

Icon.propTypes = propTypes

export default Icon

我知道我可以用 interface 替换我的 propTypes

interface Props {
name: string
}

但是,TypeScript 提示我没有声明 className。问题是,理想情况下,我希望使用 interface 作为开发人员可以提供的 Prop 的一种规范,而不必声明像 className 这样的 Prop 由 styled-components 等库注入(inject)的主题

如何正确地将此组件转换为 TypeScript?

最佳答案

import React from "react";
import styled from "styled-components";

interface Props {
name: string;
className?: string;
}

const NonStyledIcon: React.SFC<Props> = ({ name, className, ...props }) => (
<i className={`material-icons ${className}`} {...props}>
{name}
</i>
);

const Icon = styled(NonStyledIcon)`
font-size: ${props => props.theme.sizeLarger};
`;

export default Icon;

根据样式组件 TypeScript docs : 在定义组件时,您需要在 Props 接口(interface)中将 className 标记为可选

关于reactjs - 带有样式组件的 TypeScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55412662/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com