首页 > 解决方案 > 属性值预期的字符串类型,但为空

问题描述

我有一个Icon.jsx组件:

import React from 'react'; import { css } from 'emotion';

import ArrowRight from "./arrow-right.svg";

export const iconTypes = {
    arrowRight: 'ARROW_RIGHT',
    //arrowLeft: "ARROW_LEFT", }

const iconSrc = {
    ARROW_RIGHT: ArrowRight,
    ARROW_LEFT: ArrowLeft, }


export default ({ type }) => {
    return (
        <Icon>
            <img src={iconSrc[type]} />
        </Icon>
    )
};

还有一个“Icon.jsx”的故事:

import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import Icon from "../components/Icon/Index";
import { iconTypes } from "../components/Icon/Index";


storiesOf("Icon", module)
    .add("with text", () => (
        <Icon type={iconTypes.leftArrow}>
            </Icon>
    ));

我在组件上不断收到以下错误Icon.jxs

 Property value expected type of string but got null

但我无法弄清楚,任何帮助将不胜感激。

标签: reactjs

解决方案


问题出在ES6语法上,效果很好:

export default function Icon({ type }) {
    return (
        <div>
            <img src={iconSrc[type]} />
        </div>
    )
};

推荐阅读