React.js 0.14 - 未在“WelcomePage”中指定必需的道具“clientId”。检查 `RoutingContext` 的渲染方法

Question

在我的应用程序中，它是我的反应路由器的父组件，我有这个：

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.propTypes = {
  clientId: PropTypes.string.isRequired
};

Required prop clientId was not specified in WelcomePage. Check the render method of RoutingContext.

我以为我已经通过应用程序的 renderChild() 方法使用“...this.state”将 clientId 道具传递给 WelcomePage，不是吗？

有没有人看出错误在哪里？同样，clientID 值确实成功传递到 WelcomePage，但如果我在 WelcomePage 上要求它，我会收到错误消息。

非常感谢

Answer 1

您不能在 propTypes 上使用 .isRequired 作为路由组件。

这是因为 React 在创建元素时会检查 propTypes。 React Router 最初将仅使用 React Router props 创建所有路由组件元素；当您到达 cloneElement 调用时，此验证已经发生并失败。

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

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

React.js 0.14 - 未在“WelcomePage”中指定必需的道具“clientId”。检查 `RoutingContext` 的渲染方法

React.js 0.14 - Required prop `clientId` was not specified in `WelcomePage`. Check the render method of `RoutingContext`

reactjs

react-router