react.js - 已经传参crumb，但还是报Required prop `crumb` was not specified in `t`？

问题描述

问 题

一个有关 控制台报错：Warning: Failed prop type: Required prop crumb was not specified in t. 的问题？

网上查阅了一番，但大都类似，没能解决我的问题。

---

// BeadCrumb 组件代码如下：

import React, { Component, PropTypes } from 'react'
import { Link } from 'react-router'
import { Breadcrumb } from 'antd'

const CrumbItem = Breadcrumb.Item;
const STYLE = {
    crumb: {
        margin: '26px 0 10px'
    },
    crumbTitle: {
        fontSize: '14px',
    },
};

export default class BreadCrumbT extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        const { crumb} = this.props;
// console.log('crumb: ', crumb)
        return (
            <div style={STYLE.crumb}>
                <Breadcrumb>
                    { crumb &&
                        crumb.map((item, idx) =>
                            <CrumbItem style={STYLE.crumbTitle} key={idx}>
                                { item.link ? <Link to={item.link}>{item.title}</Link> : item.title }
                            </CrumbItem>
                        )
                    }
                </Breadcrumb>
            </div>
        )
    }
}
Breadcrumb.propTypes = {
    crumb: PropTypes.arrayOf(
        PropTypes.shape({
            link: PropTypes.string,
            title: PropTypes.string.isRequired,
        })
    ).isRequired,
}

// NewsList 组件代码如下：

import React, { Component } from 'react'
import BreadCrumb from '../../components/BreadCrumb'
import { Container, Row, Col } from '../../layout'
import PaginateMid from '../../components/PaginateMid'
import DataList from '../../components/DataList'

export default class NewsList extends Component {
    constructor(props) {
        super(props)
        this.handlePageChange = this.handlePageChange.bind(this)
    }
    handlePageChange() {

    }
    render() {
        const newsListData = [
            { name: '基础教育慕课1.0 何去何从？', time: '2017.01.05 12:56', link: 'news/detail/1234' },
            { name: '基础教育慕课1.0 何去何从？', time: '2017.01.05 12:56', link: 'news/detail/1234' },       
        ];
        const crumbData = [
            { title: '首页', link: '/' },
            { title: '新闻列表' },
        ]

        return (
            <div>
                <BreadCrumb crumb={crumbData} />
                {newsListData &&
                    newsListData.map((item, idx) => <DataList key={idx} item={item} colNum={2} showIcon={true} />)
                }
                <PaginateMid total={63}
                             pageSize={10}
                             currentPage={2}
                             pageChange={this.handlePageChange} />
            </div>
        )
    }
}

结果，控制台输出了如下错误：

lib.js:36 Warning: Failed prop type: Required prop `crumb` was not specified in `t`.
    in t (created by BreadCrumbT)
    in BreadCrumbT (created by NewsDetail)
    in div (created by NewsDetail)
    in NewsDetail (created by RouterContext)
    in div (created by Container)
    in Container (created by ListContainer)
    in ListContainer (created by RouterContext)
    in div (created by Roots)
    in Roots (created by RouterContext)
    in RouterContext (created by Router)
    in Router
    in div
    in t

可是我在 NewsList 组件中调用 BreadCrumb 组件时，明明已经传递 crumb 参数了，为什么还汇报这样的错误呢？请各路大神不吝赐教啊~~~~！！！！！不胜感激！！

解决方案

我其实看不懂你的用途是什么…

第一个代码中你写了一个BreadCrumbT组件…然后对Breadcrumb组件写了些propTypes的代码，这部份的意思是？

第二个代码中你也没用到BreadCrumbT组件…然后对Breadcrumb组件传递crumb属性？这句<BreadCrumb crumb={crumbData} />，我查了下BreadCrumb，它应该也不需要这个props。

我猜想你会不会是组件名称乱掉了？

这篇关于react.js - 已经传参crumb，但还是报Required prop `crumb` was not specified in `t`？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！