ホームページ > 記事 > ウェブフロントエンド > React Router v4 でカスタム Props を子コンポーネントに渡す方法は?
問題:
React Router v4 で、 this.props.route を介してルート props にアクセスすると、未定義が返されます。子コンポーネントは、親コンポーネントから渡されたカスタム props を受け取ることができません。
コード例:
<code class="javascript">// Parent Component render() { return ( <Router> <div> <Switch> <Route path="/" exact test="hi" component={Home} /> <Route path="/progress" test="hi" component={Progress} /> <Route path="/test" test="hi" component={Test} /> </Switch> </div> </Router> ); } // Child Component render() { console.log(this.props); // Returns {match: {...}, location: {...}, history: {...}, staticContext: undefined} }</code>
解決策:
カスタム プロパティを子コンポーネントに渡すには、レンダー プロパティを使用してルートとインラインでコンポーネントを定義します:
<code class="javascript">// Parent Component render() { return ( <Router> <div> <Switch> <Route path="/" exact render={(props) => <Home test="hi" {...props} />} /> <Route path="/progress" render={(props) => <Progress test="hi" {...props} />} /> <Route path="/test" render={(props) => <Test test="hi" {...props} />} /> </Switch> </div> </Router> ); }</code>
子コンポーネントで、次のようにカスタム プロパティにアクセスします:
<code class="javascript">render() { console.log(this.props.test); // Returns "hi" }</code>
注: デフォルトのルータープロパティ (一致、場所、履歴など) へのアクセスを保持するために、{...props} が子コンポーネントに渡されていることを確認してください。
以上がReact Router v4 でカスタム Props を子コンポーネントに渡す方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。