Question

我有一个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

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

Answer 1

问题出在ES6语法上，很好用：

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

Answer 2

您在<Icon type={iconTypes.leftArrow}></Icon>中使用leftArrow，但尚未定义，因此type={undefined}并传递undefined或null将导致您所指定的错误。

属性值是字符串的预期类型，但为空

解决方法是使用定义的箭头类型：

<Icon type={iconTypes.ARROW_LEFT}></Icon>

属性值预期为字符串类型，但为空

2 个答案: