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

Question

这是我的目标。我想创建一个复合组件，它将在显示 children 元素之前检查匹配的 url 的有效性。否则它 return 显示错误消息的通用组件。

所以这是我的代码 'decorator':

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对象传递到EnforceUrlValidation里面的children。我怎样才能做到这一点？

尝试 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 将属性添加到 children:

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

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

How to pass extra property to a children element in a reactjs?

reactjs

jsx

react-router-v4

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

How to pass extra property to a children element in a reactjs?

reactjs

jsx

react-router-v4

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