Question

这是我的目标。我想创建一个复合组件，它将在显示children元素之前检查匹配网址的有效性。否则，它返回一个公共组件以显示错误消息。

所以这是我的'装饰'的代码：

const EnforceUrlValidation = (test, children) => {
  const fn = ({ match }) => {
    if (! test( match )) {
      return ( <InvalidUrlContainer /> );
    }
    return ({children});
  }
  return fn;
}

它是如何在我的路由器中使用的：

const WelcomePage = EnforceUrlValidation(
    (match) => {
      const articleId = match.params.articleId;
      return articleId && isValidarticleId(articleId);
    }
  , <WelcomeContainer/>
)
...
<Routers>
     <Switch>
          <Route
              path="/:articleId"
              component={WelcomePage}
           />
...

</Routers>

我现在遇到的问题是我仍然希望将match对象传递到children EnforceUrlValidation内。我怎样才能做到这一点？

尝试1 ：

const EnforceUrlValidation = (test, children) => {
  const fn = ({ match }) => {
    if (! test( match )) {
      return ( <InvalidUrlContainer /> );
    }
    return (<children match={match} />);
  }
  return fn;
}

在这种情况下，children不会呈现。

尝试2 ：

const EnforceUrlValidation = (test, children) => {
  const fn = ({ match }) => {
    if (! test( match )) {
      return ( <InvalidUrlContainer /> );
    }
    return (
      <div match={match} >{children} </div>
    )
  }
  return fn;
}

失败，因为div不支持match

Answer 1

您可以使用React.cloneElement向儿童添加媒体资源：

const EnforceUrlValidation = (test, children) => {
  const fn = ({ match }) => {
    if (! test( match )) {
      return ( <InvalidUrlContainer /> );
    }
    const extendedChild = React.cloneElement(children, {match: match});
    return extendedChild;
  }
  return fn;
}

如何将额外的属性传递给reactjs中的children元素？

1 个答案: