React.PropTypes在某些情况下不起作用

时间:2016-12-02 10:28:11

标签: reactjs redux react-proptypes

项目在开发模式下运行(process.env.NODE_ENV ===' development')

我有两个React组件。

第一个组件连接到redux

第二个成分是第一个成分。

这两个组件都有propTypes验证。

LoadingPage组件(已连接)

class LoadingPage extends Component {
  render () {

    let {provider} = this.props;

    return (
      <AppCommonPageLayout navigationState="">
        <ProviderHeaderLayout title={provider.name}/>
        <MessageBlock text="One moment"/>
        <Loader/>
      </AppCommonPageLayout>
    );
  }
}

LoadingPage.propTypes = {
  noPropInComponent: React.PropTypes.string.isRequired,
  provider       : React.PropTypes.object,
  navigationState: React.PropTypes.object
};

LoadingPage.defaultProps = {
  provider: {}
};

function mapStateToProps (state) {
  return {
    provider       : getCurrentProvider(state)
  };
}

export default connect(mapStateToProps)(LoadingPage);

AppCommonPageLayout组件

class AppCommonPageLayout extends Component {

  render () {

    let {children, navigationHandlers, navigationState} = this.props;

    return (
      <AppRootLayout>

        <AppHeaderLayout>
          <div></div>
        </AppHeaderLayout>

        <AppContentLayout>
          {children}
        </AppContentLayout>

        <FooterLayout>
          <Navigation isExtended={true} handlers={navigationHandlers} state={navigationState}/>
        </FooterLayout>

      </AppRootLayout>
    );
  }
}

AppCommonPageLayout.propTypes = {
  noPropInComponent2: React.PropTypes.string.isRequired,
  children          : React.PropTypes.node.isRequired,
  navigationState   : React.PropTypes.shape({
    backward: React.PropTypes.func.bool,
    search  : React.PropTypes.func.bool,
    home    : React.PropTypes.func.bool,
    advert  : React.PropTypes.func.bool,
    forward : React.PropTypes.func.bool
  }),
  navigationHandlers: React.PropTypes.shape({
    onBackward: React.PropTypes.func,
    onSearch  : React.PropTypes.func,
    onMain    : React.PropTypes.func,
    onAdvert  : React.PropTypes.func,
    onForward : React.PropTypes.func
  }).isRequired
};

export default AppCommonPageLayout;

但仅在LoadingPage组件中发出警告

warning.js:36 Warning: Failed prop type: Required prop `noPropInComponent` was not specified in `LoadingPage`.
    in LoadingPage (created by Connect(LoadingPage))
    in Connect(LoadingPage) (created by RouterContext)
    in div
    in Application (created by RouterContext)
    in RouterContext (created by Router)
    in Router
    in Provider

如果LoadingPage收到道具noPropInComponent,即使AppCommonPageLayout没有收到noPropInComponent2

,控制台也不会收到警告

WHY ???

我在控制台中对React的checkReactTypeSpec进行了调试,只调用了Redux中的连接组件。这是正常的吗?

我正在使用:

"react": "15.3.2", "react-dom": "15.3.2", "react-redux": "4.4.5", "redux": "3.5.2"

0 个答案:

没有答案