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

【问题标题】：Property value expected type of string but got null属性值预期的字符串类型，但为空
【发布时间】：2019-02-09 02:17:49
【问题描述】：

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

但我想不通，任何帮助将不胜感激。

【问题讨论】：

'ArrowLeft' 未在您的代码中定义（ArrowRight 指的是 svg 文件）

标签： reactjs

【解决方案1】：

问题在于 ES6 语法，它工作正常：

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

谢谢，但无论Icon 故事中的调用如何，我都会在Icon.jsx 组件本身上遇到编译错误。