这里是 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/