-1

我编写了以下 TypeScript 组件：

import React from 'react'
import cx from 'classnames'

/* import SVGs */
import { ReactComponent as Phone } from '../images/phone.svg' 
import { ReactComponent as AtDesk } from '../images/at-desk.svg' 
import { ReactComponent as Available } from '../images/available.svg' 
import { ReactComponent as Blushing } from '../images/blushing.svg' 
import { ReactComponent as Skills } from '../images/skills.svg' 
import { ReactComponent as Smile } from '../images/smile.svg' 
import { ReactComponent as Beach } from '../images/beach.svg' 

const selectMiniMe = (name: string): any => {
    switch (name) {
      case 'available' :
        return <Available />
      case 'at-desk':
        return <AtDesk/>
      case 'blushing':
        return <Blushing />
      case 'skills':
        return <Skills />
      case 'phone':
        return <Phone />
        case 'beach':
          return <Beach />
      case 'smile':
      default:
        return <Smile />
    }
  }

/* Import Types */
import Props from './types/props'

/* import Styles */
import styles from './styles.module.scss'

/* Render Component */
export const MiniMe: React.FC<Props> = ({ name, width, position, classes}: Props) => {
  return <div className={cx(styles['mini-me'], styles[`w-${width}`], classes)}>
    { selectMiniMe(name) }
    </div>
}


export default MiniMe

该组件可以毫无问题地呈现为故事书中的故事。一切看起来和工作都完全符合预期，并且没有报告任何错误。

当我尝试将该组件导入一个全新的 Create-React-App TypeScript 应用程序时。我收到以下错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `MiniMe`.

我怀疑这个问题与加载程序有关，但据我所知，我正在按照 CRA 已经配置为使用的方式做所有事情，所以我不知道它在哪里失败。

有关其他参考，这里是回购的链接：https ://github.com/foxleigh81/alex-foxleigh-portfolio/tree/2020

我还设法找到了对这个确切问题的参考——据我所知，这个问题实际上在 2018 年在 CRA 中得到了修复，所以我不知道为什么我会在这里遇到这个问题：https://github。 com/facebook/create-react-app/pull/5573

4

2 回答 2

1

尝试声明 svg 模块

将此添加到 // / <reference types="react-scripts" /> declare module '*.svg'; 您的 react-app-env.d.ts 文件中。

于 2020-10-15T23:20:13.537 回答
0

查看您的存储库，您似乎正在使用learna 和 react setup并且没有create-react-app完全使用，因为我没有看到添加到create-react-app您的代码库中使用那里创建的新 react 应用程序的所有依赖项，因此我不确定使用svgas component 会工作。

话虽如此，这不会阻止您使用img标签。我已经更新了您的代码，它按预期工作：

import React from 'react'
import cx from 'classnames'

/* Import Types */
import Props from './types/props'

/* import SVGs */
import Phone from './images/phone.svg' 
import AtDesk from './images/at-desk.svg' 
import Available from './images/available.svg' 
import Blushing from './images/blushing.svg' 
import Skills from './images/skills.svg' 
import Smile from './images/smile.svg' 
import Beach from './images/beach.svg' 


/* import styles */
import styles from './styles.module.scss'

/* Render component */
export const MiniMe: React.FC<Props> = ({ name, width, position, classes}: Props) => {
  const selectMiniMe = (name: string): any => {
    switch (name) {
      case 'available' :
        return <img src={Available} />
      case 'at-desk':
        return <img src={AtDesk} />
      case 'blushing':
        return <img src={Blushing} />
      case 'skills':
        return <img src={Skills} />
      case 'phone':
        return <img src={Phone} />
        case 'beach':
          return <img src={Beach} />
      case 'smile':
      default:
        return <img src={Smile} />
    }
  }

  return <div className={cx(styles['mini-me'], styles[`w-${width}`], classes)}>
    {selectMiniMe(name)}
    </div>
}

export default MiniMe
于 2020-10-15T17:58:02.143 回答