类型'()=>无效'不能分配给类型'字符串'

时间:2018-12-11 13:43:37

标签: javascript reactjs typescript

我在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'

感谢您的帮助!谢谢。

4 个答案:

答案 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