更改作为道具发送的Svg React组件使用svgr导致“渲染未返回任何内容”错误 初始负载通过“选择”重新命名详细信息

问题描述

问题

• 在初始渲染中，一切正常！
• 从“名称”选择中选择另一个图标时，会出现错误（请参见屏幕截图）
• 问题似乎是第二次发送名称道具时，该函数为空

初始负载

name = SvgAccessibleIcon(props)

通过“选择”重新命名

name = f()

SvgAccessibleIcon（...）：渲染未返回任何内容。这通常意味着缺少return语句。或者，要不显示任何内容，请返回null。

工作原理

1. 在故事中，我使用SVGR import将图标/ SVG作为React组件（请参见CRA Docs #Adding SVGs）[iconMap.js]
2. 我import Icon组件[Icon.jsx]
3. 我使用图标组件通过name道具（例如<Icon name={Svg500px} />）传递Svg组件。
4. 在Icon.jsx中，getStyledIcon(name)与传递的SVG组件（作为函数）一起被调用。
5. 在Icon.styled.js Emotion中为组件设置样式。
6. 然后回到Icon.jsx，然后const StyledIcon编辑return

---

详细信息

Icon.style.js

import styled from '@emotion/styled';
import css from '@styled-system/css';
import { variant } from 'styled-system';

const style = css({
  fill: 'accent.base',width: '1',height: '1',});

export const getStyledIcon = (Svg) => styled(Svg)`
  ${style}
`;

export {
  style,flip,size,};

Icon.jsx

import React from 'react';
import PropTypes from 'prop-types';

// Styling
import { getStyledIcon } from './Icon.styled';

export const Icon = ({
  name,}) => {
  const StyledIcon = getStyledIcon(name);

  return (
     <StyledIcon size={size} flip={flip} />
  );
};

然后我在Storybook故事中使用Icon组件。

index.stories.mdx

import { Meta,Story,Preview,Props } from '@storybook/addon-docs/blocks';
import { withKnobs,text,select,boolean } from '@storybook/addon-knobs';

import { Icon } from './';
import  { SvgPhonesolid,SvgAccessibleIcon,Svg500px } from './iconMap.js'

## Knobs
<Story name="knobs">
  <Icon 
    name={select("Name",{ Svg500px,SvgPhonesolid },Svg500px)}
    size={select("Size",["xs","sm","md","lg","xl"],"xl")} 
    flip={select("Flip",["flip","noFlip"],"noFlip")}
  />
</Story>

iconMap.js

import { ReactComponent as Svg500px } from '../../../../../src/assets/icons/500px.svg';
import { ReactComponent as SvgAccessibleIcon } from '../../../../../src/assets/icons/accessible-icon.svg';
import { ReactComponent as SvgAccusoft } from '../../../../../src/assets/icons/accusoft.svg';
...

export {
  Svg500px,SvgAccusoft,...
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）