当尝试在按钮内呈现svg图像时，为什么崩溃？
当尝试在按钮内呈现svg图像时，为什么崩溃？
提问于 2020-02-07 13:49:54
我创建了一个带有自定义按钮的库。按钮文件夹包含24个svg文件。
在项目中，我传递了一个文本、一个函数和图标，但是当尝试呈现图标崩溃并显示下一个错误时：
index.js:1警告: React.createElement: type无效--需要一个字符串(用于内置组件)或一个类/函数(用于复合组件)，但React.createElement: undefined。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。
我不知道为什么不渲染图像，请谁来帮我？
这是我的代码：
import React from "react";
import PropTypes from "prop-types";
import { ReactComponent as ArrowIcon } from './arrow_icon.svg';
import { ReactComponent as ArrowRight } from './arrow_right_icon.svg';
import { ReactComponent as ArrowIcon2 } from './arrow2_icon.svg';
import { ReactComponent as BellPlusIcon } from './bell_plus_icon.svg';
import { ReactComponent as ChartIcon } from './chart_icon.svg';
import { ReactComponent as ChartLineSolidIcon } from './chart_line_solid_icon.svg';
import { ReactComponent as CloseIcon } from './close_icon.svg';
import { ReactComponent as CogIcon } from './cog_icon.svg';
import { ReactComponent as DeleteIcon } from './delete_icon.svg';
import { ReactComponent as DownloadIcon } from './download_icon.svg';
import { ReactComponent as EarsIcon } from './ears_icon.svg';
import { ReactComponent as EditIcon } from './edit_icon.svg';
import { ReactComponent as ExportIcon } from './export_icon.svg';
import { ReactComponent as FilterIcon } from './filter_icon.svg';
import { ReactComponent as LocationIcon } from './location_icon.svg';
import { ReactComponent as LogoutIcon } from './logout_icon.svg';
import { ReactComponent as MapIcon } from './map_icon.svg';
import { ReactComponent as PlusIcon } from './plus_icon.svg';
import { ReactComponent as ServerIcon } from './server_icon.svg';
import { ReactComponent as TagIcon } from './tag_icon.svg';
import { ReactComponent as TiresiasIcon } from './tiresias_icon.svg';
import { ReactComponent as UsersCogIcon } from './users_cog_icon.svg';
import { ReactComponent as VGeneralIcon } from './vgeneral_icon.svg';
import 'bootstrap/dist/css/bootstrap.css';
import 'react-spinkit/css/three-bounce.css';
import './go-button.scss';
class Button extends React.PureComponent {
handleClick = (e) => {
e.stopPropagation();
this.props.clickButton();
}
getIcon = (nameIcon) => {
switch(nameIcon.toLowerCase()) {
case 'arrow': return <ArrowIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'arrow_right': return <ArrowRight style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'arrow2': return <ArrowIcon2 style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'bell-plus': return <BellPlusIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'chart': return <ChartIcon style={{ display: 'inline' }} className={"go-button__icon"} />
case 'chart-line-solid': return <ChartLineSolidIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'close': return <CloseIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'cog': return <CogIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'delete': return <DeleteIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'download': return <DownloadIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'ears': return <EarsIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'edit': return <EditIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'export': return <ExportIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'filter': return <FilterIcon style={{ display: 'inline' }} className={"go-button__icon"} />
case 'location': return <LocationIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'logout': return <LogoutIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'map': return <MapIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'plus': return <PlusIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'server': return <ServerIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'tag': return <TagIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'tiresias': return <TiresiasIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'users-cog': return <UsersCogIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
case 'vgeneral': return <VGeneralIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
default:
return null;
}
}
render() {
return (
<button
disabled={this.props.disabled}
type={this.props.type}
className={`${this.props.className} go-button ${(this.props.active) ? '--active' : ''}
--${this.props.theme} ${(this.props.outline) ? '--outline' : ''}
--${this.props.size} ${(this.props.primary) ? '--primary' : ''} ${(this.props.circular) ? '--circular' : ''}`}
onClick={this.handleClick}
style={this.props.style}
id={this.props.id}
>
{ this.props.icon && this.getIcon(this.props.icon) }
{!this.props.circular &&
<span>{this.props.text}</span>
}
{this.props.loading &&
<div className="c-spinner-animation w-100">
<div className="bounce1" />
<div className="bounce2" />
<div className="bounce3" />
</div>
}
</button>
);
}
}
export default ButtonStack Overflow用户
发布于 2020-02-09 12:46:07
最后，我添加SVG作为组件，并完美地工作。
const ArrowIcon = props => {
return (
<svg className={className} style={style} ....></svg>
)
}
export default ArrowIcon;在按钮组件中：
从‘./icon组件/箭头_ ArrowIcon’导入ArrowIcon；
在交换中：
getIcon = (nameIcon) => {
switch(nameIcon.toLowerCase()) {
case 'arrow': return <ArrowIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
default:
return null;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60114784
复制相关文章
相似问题
腾讯云开发者
