React.js 0.14 - 在`WelcomePage`中没有指定必需的prop`buinerId`.检查`RoutingContext`的render方法

Question

在我的APP中,这是我的react-router的父组件,我有这个:

export default class APP extends Component {
  static propTypes = {
    children: PropTypes.element
  };

  constructor(props) {
    super(props);
    this.state = {
      clientId: 'A134567897',
      ..........................
    };
  }

  componentDidCount() {
    CompanyInfo.getGenlInfo()
      .then((response) => {
        const data = response.data;
        this.setState(data);
      });
  }

  renderChild = () =>
    React.cloneElement(this.props.children, {
      // this needs to be passed to all child routes
      ...this.state
    });

  render() {
    return (
      <section>
        <Header { ...this.state } />

        {/* This is where the dynamic content goes */}
        { React.Children.map(this.props.children, this.renderChild) }

        <Footer { ...this.state } />
      </section>
    );
  }
}

在我的路由器中,"/"路径会显示WelcomePage(主页)组件.

WelcomePage组件确实按预期显示,this.props.clientId确实有一个值,但如果我在WelcomePage上编码....

WelcomePage.propTypes = {
  clientId: PropTypes.string.isRequired
};

clientId未指定所需的道具WelcomePage.检查渲染方法RoutingContext.

我以为我负责通过APP的renderChild()方法用'... this.state'将clientId道具传递给WelcomePage,不是吗？

有谁看到错误所在？同样,clientID值成功传递给WelcomePage,但如果我在WelcomePage上需要它,则会收到错误.

非常感谢

Answer 1

您不能使用.isRequiredon propTypes作为路径组件.

这是因为React propTypes在元素创建时进行检查.React Router最初只使用React Router道具创建所有路径组件元素; 当您接到cloneElement电话时,此验证已经发生并且失败了.

我们最近在升级指南中添加了一条说明,详细说明了这一点:https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md#routehandler

有关详细信息,请参阅:https://github.com/facebook/react/issues/4494#issuecomment-125068868