属性值期望字符串的类型但是为null

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将导致你指定的错误。

属性值期望字符串的类型但是为null

修复是使用定义的箭头类型：

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