我在Typescript中遇到问题,我试图了解如何在src={close}
中声明ItemProps{}
。我收到以下错误:
类型'()=> void'不能分配给类型'字符串'。
不幸的是,我不知道如何解决此错误。
import * as React from 'react';
import close from '../../assets/close.svg';
export type ItemProps = {
/**
* Close icon source
*/
src: any;
}
该错误发生在src={close}
<img className={styles.close} src={close} alt=''/> //src={close} is 'close.svg'
感谢您的帮助!谢谢。
答案 0 :(得分:2)
() => void
表示close
的类型为function
,它返回void
,但是src
属性期望的值为string
类型。确保close
实际上是string
或返回string
的函数。
修改: 我对反应一无所知,但显然加载svg图像并不是那么容易,您可以看看这个article
答案 1 :(得分:1)
<img className={styles.close} src={require('../../assets/close.svg')} alt=''/>
应该做这份工作!导入将尝试作为函数导入。使用require可以指定文件路径。
答案 2 :(得分:1)
如果它实际上是运行时的string
,而您只是想让TypeScript不再大吼大叫,那么您只需要修正输入内容即可:
declare module '*.svg' {
const value: string;
export default value;
}
这将告诉TypeScript每个导入的*.svg
文件都导出一个string
。上面的声明应该放在项目的声明文件中(例如:stubs.d.ts
)。
答案 3 :(得分:0)
好吧,正如OP所问的那样,这是将任何SVG文件转换为React组件的方法。这使您可以更好地控制SVG,甚至还可以对其进行动画处理(即react-popmotion,react-animated等)或根据状态更新路径。另一个很酷的好处是,这样,您不需要任何webpack / gulp / grunt /任何插件来内嵌SVG,因为它们是由React本身内联的;)。
首先,打开您的SVG文件,复制代码。
然后,在components/icons/CheckboxIcon.js
或类似文件中创建一个新文件。
这是我为工作中的项目制作的CheckBoxIcon的示例:
import React from 'react'
import PropTypes from 'prop-types'
const CheckBoxIcon = props => (
<svg
style={{ width: 24, height: 24 }}
viewBox={'0 0 24 24'}
onClick={props.onClick}
>
<path
fill={props.checked ? '#1E82E4' : 'rgba(0,0,0,.67)'}
d={
props.checked
? 'M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Zs'
: 'M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z'
}
/>
</svg>
)
CheckBoxIcon.propTypes = {
checked: PropTypes.bool,
onClick: PropTypes.func
}
CheckBoxIcon.defaultProps = {
checked: false,
onClick: () => null
}
export default CheckBoxIcon
然后将其作为常规的React组件导入,即:
import CheckBoxIcon from '../icons/CheckBoxIcon';
render () {
return (
<div>
{/* My components... */}
<CheckBoxIcon />
<CheckBoxIcon checked={true} />
</div>
)
}
有关更多信息,请随时在dev.to上查看此文章:R: as.POSIXct timezone and scale_x_datetime issues in my dataset