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（）方法将clientId道具传递给WelcomePage并使用'... this.state'，不是吗？

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

非常感谢

Answer 1

您无法在.isRequired上使用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

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

1 个答案: