1

これが私の目標です。要素を表示する前に、一致した URL の有効性をチェックする複合コンポーネントを作成したいと考えています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

4

1 に答える 1

7

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;
}
于 2017-03-22T10:38:01.830 に答える