Wie übergebe ich eine zusätzliche Eigenschaft an ein Child-Element in einem reactjs?

Question

Das ist mein Ziel. Ich möchte eine zusammengesetzte Komponente erstellen, die die Gültigkeit der übereinstimmenden URL überprüft, bevor das Element children angezeigt wird. Andernfalls wird eine gemeinsame Komponente zurückgegeben, um eine Fehlermeldung anzuzeigen.

So, hier ist mein Code meines 'decorator':

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

Es ist, wie es in meinem Router verwendet wird:

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

</Routers> 

Das Problem, das ich jetzt habe, ist, dass ich will noch Pass das match Objekt in die children innerhalb EnforceUrlValidation. Wie kann ich das erreichen?

Versuch 1:

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

Die children ist in diesem Fall nicht gemacht.

Versuch 2:

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

Es schlägt fehl, weil div nicht match

Answer 1

Sie können React.cloneElement unterstützt verwenden Eigenschaft Kinder hinzuzufügen:

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